前端性能優化--避免重繪和回流的兩種方法


重繪概念:當render tree 中的一些元素需要更新屬性,而這些屬性只是影響外觀,風格不會影響布局的,比如說background-color。則就叫重繪。

觸發頁面重布局的屬性

1、盒子模型相關屬性

2、定位屬性及浮動

3、改變節點內部文字結構

①. width , height , padding , margin , display , border-width , border , min-height

②. top , bottom , left , right ,position , float , clear

③. text-align , overflow-y , font-weight , overflow , font-family, line-height , vertival-vlign , white-space , font-size

只會觸發重繪的屬性

color , border-style , visibility ,text-decoration , background , background-image , background-position , background-repeat , background-size , outline-color , outline , outline -style , outline-width , box-shadow

新建DOM的過程

1、獲取DOM后分割為過個圖層

2、對每個圖層的節點計算樣式結果(Recalculate style -- 樣式重計算)

3、為每個節點繪制填充到圖層位圖中( Paint Setup 和Paint -- 重繪)

4、為每個節點生成圖形和位置 (Layout--回流和重布局)

5、圖層作為紋理上傳GPU

6、符合多個圖層到頁面上生成最終的屏幕圖像*(Composite Layers - 圖層重組)

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM