1.輸入網址到出現(xiàn)網頁過程發(fā)生了什么

? 1.URL解析 （找ip給tcp/ip協(xié)議工作）

? ? ? ? 1.本地解析：確定用什么協(xié)議和解析哪個域名

? ? ? ? 2.瀏覽器本地緩存中查找對應ip

? ? ? ? 3.本地host文件查找

? ? ? ? 4.路由器dns查找

? ? ? ? 5.dns服務器查找

? 2.tcp/ip三次握手與服務器進行通信

? ? ? ? 1.三次握手

? ? ? ? 2.瀏覽器打包http信息發(fā)送

? ? ? ? 3.服務器返回

? ? ? ? 4.四次握手結束連接

? 3.頁面渲染

? ? ? ? 1.html解析dom樹：可能被css和js資源堵塞，包含script標簽和注釋

? ? ? ? 2.css解析css規(guī)則樹：與html解析同進行，與script執(zhí)行互斥

? ? ? ? 3.html和css合成渲染樹：繪制樹，只有在網頁上有位置的元素才會在渲染樹中

? ? ? ? ?Display：none不在

? ? ? ? 4.按照渲染樹計算位置，繪制網頁

2.瀏覽器渲染網頁詳情：

? ? ?1.樣式堵塞html解析，堵塞腳本執(zhí)行但不堵塞腳本加載，除非加async屬性,DOM樹創(chuàng)建完成后DOMContentLoaded事件即觸發(fā)，這時候可以用過script來操作DOM節(jié)點。

? ? 2.瀏覽器在cssom構建完成之前不會渲染任何已處理內容

? ? 3.css解析和script執(zhí)行互斥

? ? 4.回流：某部分變化影響了全局，頁面重新計算渲染

? ? ? ? 減少回流：transform做形變和位移，讓元素脫離1文檔流

? ? 4.重繪：幾何尺寸和位置沒有變化，如顏色，背景色

? ? 5.優(yōu)化方法：

? ? ? ? ? 1.樣式在前，腳本在后

? ? ? ? ? 2.css選擇器嵌套減少到最小

? ? ? ? ? 3.減少js進行dom操作

? ? ? ? ? 4.用transform做形變位移