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

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

觸發頁面重佈局的屬性spa

一、盒子模型相關屬性it

二、定位屬性及浮動io

三、改變節點內部文字結構float

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

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

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

只會觸發重繪的屬性top

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

新建DOM的過程

一、獲取DOM後分割爲過個圖層

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

三、爲每一個節點繪製填充到圖層位圖中( Paint Setup 和Paint -- 重繪)

四、爲每一個節點生成圖形和位置 (Layout--迴流和重佈局)

五、圖層做爲紋理上傳GPU

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

相關文章
相關標籤/搜索