從輸入url 到頁(yè)面呈現(xiàn)完成到底都經(jīng)歷了什么?

分為DNS解析? >? TCP連接? >? HTTP請(qǐng)求與響應(yīng)? > 客戶端瀏覽器解析渲染? > 連接結(jié)束。其中瀏覽器解析渲染包含HTML詞法、語(yǔ)法的解析、CSS解析、DOM樹生成、渲染樹建立、屏幕繪制。

關(guān)于Chrome DOM 重繪

舊版 Chrome 準(zhǔn)備在屏幕上繪制像素時(shí)，它必須首先確定頁(yè)面上的哪些元素需要重繪，哪些可以從上一幀的緩存中復(fù)制。在具有頻繁 DOM 更改的動(dòng)態(tài)頁(yè)面上，會(huì)導(dǎo)致嚴(yán)重的性能問題。

新版Chrome 怎么改進(jìn)的呢？Chrome 為每個(gè)元素生成繪制命令，通過跟蹤分析這些繪制命令，以此來識(shí)別視覺上不重疊的子集。如果未修改其中一個(gè)子集，則可以直接從緩存中復(fù)制整個(gè)塊，而無需進(jìn)行任何其他工作。這就顯著了提升了 DOM 改變后的重繪性能。