當(dāng)我們在輸入網(wǎng)址后按回車鍵瀏覽器會加載出我們想要的頁面汽绢,但很多小伙伴們都不是很清楚從輸入URL按回車鍵到頁面呈現(xiàn)到底發(fā)生了什么梅垄,正好最近有復(fù)習(xí)這方面知識精置,便總結(jié)下,可以參考
首先按下回車鍵后兄朋,瀏覽器會根據(jù)你輸入的域名發(fā)送到DNS服務(wù)器上,
DNS服務(wù)器將進(jìn)行動態(tài)域名解析未玻,解析成對應(yīng)的IP地址
然后 瀏覽器將于遠(yuǎn)程服務(wù)器通過TCP三次握手協(xié)商來建立一個TCP/IP連
接
一旦TCP/IP連接建立,瀏覽器會通過該連接向遠(yuǎn)程服務(wù)器發(fā)送http請求胡控,
遠(yuǎn)程服務(wù)器找到資源并使用http響應(yīng)返回該資源扳剿,瀏覽器接收服務(wù)器的響
應(yīng)結(jié)果,進(jìn)行頁面渲染
解析渲染步驟如下:
1.解析html
2.構(gòu)建DOM樹
3.DOM樹與CSS樣式進(jìn)行附著構(gòu)建呈現(xiàn)樹
4.布局
5.繪制
在頁面繪制時會出現(xiàn)重排和重繪的概念
重排(回流):DOM的變化影響了元素的幾何屬性昼激,瀏覽器會重新計算元素的幾何屬性庇绽,會使渲染樹中受到影響的部分失效锡搜,并重新構(gòu)造這部分渲染樹
重排很影響性能,盡量避免
重繪:在一個元素的外觀被改變瞧掺,但沒有改變布局的情況
重排一定會引起重繪耕餐,但重繪不一定引起重排
重排發(fā)生的幾種常見情況:
1.添加或刪除可見的DOM元素
2.元素位置改變
3.元素尺寸改變
4.頁面渲染初始化
5.瀏覽器窗口尺寸改變