BFC！Repaint！Reflow

Cymiran發表於2017-12-18
AI

BFC

很多人都問道BFC是什麼，為什麼父元素加上overflow:hidden/定位/inline-block會使得脫離文件流的子元素會自動撐開父元素？

  • BFC

BFC是css佈局裡的概念，是一塊區域，一個容器，內部元素不管怎樣的佈局都不會影響到區域外的元素，加了這些屬性後，父元素會被觸發生成BFC，在計算本身的寬高時，內部元素都會被解析到，此時父元素的寬高就會被撐開。

  • hasLayout

hasLayout其實就是IE567的BFC，是i.e.瀏覽器特有的;
在IE中，一個元素要麼自己對自身內容進行組織和尺寸計算，要麼由自身內容自行撐開計算，所以採用hasLayout=true/false來避免這種矛盾，當hasLayout=true時，相當於元素產生新的BFC，那元素就會對自身內容進行組織和計算；當hasLayout=false時，就不會產生新的BFC，只能通過元素內容自行撐開

那如何將hasLayout值設為true?

display:inline-block;
height:值；
width:值;
float:left/right;
position:absolute;

Reflow 和 Repaint(影響前端效能的本源)

  • 機制

瀏覽器在顯示頁面的時候，會先佈局在進行渲染，佈局則是解析HTML各個元素，構建DOM樹節點，再解析css，構建cssTree,然後組合DomTree和CssTree，去除不可見元素，構建render樹，再執行reflow迴流，根據renderTree計算每個課件元素的佈局，最後執行repaint通過繪製流程，將每個畫素渲染到螢幕上

瀏覽器初始化渲染是都會執行一次reflow迴流，這個工程主要是用來確定頁面上每個元素在螢幕上的集合位置、屬性，但每次執行一次reflow都會話費大量時間，消耗大量資源

  • 如何觸發reflow 和 repaint呢？

1、改變元素的font-size
2、改變元素盒模型：marginborderpaddingwidth
3、改變元素顏色、背景屬性
4、特殊：offsetscrollclientgetComputeedStyle

機制：在修改頁面元素樣式的時候，瀏覽器會邊reflow邊快取，如果執行新操作，為了得到新樣式，瀏覽器會檢查快取是否需要reflow，這樣就會耗時

  • 那應該如何減少頁面的迴流和重繪呢？

1、減少js逐行修改元素的樣式
2、離線處理DOM操作，如克隆節點，進行源節點替換
3、減少樣式的重新計算，減少offsetscrollclient等
總之，減少操作DOM元素就行

相關文章