BFC！Repaint！Reflow

zhoutao 發(fā)布于2019-08-29 14:05 / 493人閱讀

摘要：很多人都問道是什么，為什么父元素加上定位會使得脫離文檔流的子元素會自動撐開父元素是布局里的概念，是一塊區(qū)域，一個容器，內(nèi)部元素不管怎樣的布局都不會影響到區(qū)域外的元素，加了這些屬性后，父元素會被觸發(fā)生成，在計算本身的寬高時，內(nèi)部元素都會被解

BFC

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

BFC

BFC是css布局里的概念，是一塊區(qū)域，一個容器，內(nèi)部元素不管怎樣的布局都不會影響到區(qū)域外的元素，加了這些屬性后，父元素會被觸發(fā)生成BFC，在計算本身的寬高時，內(nèi)部元素都會被解析到，此時父元素的寬高就會被撐開。

hasLayout

hasLayout其實(shí)就是IE567的BFC，是i.e.瀏覽器特有的;
在IE中，一個元素要么自己對自身內(nèi)容進(jìn)行組織和尺寸計算，要么由自身內(nèi)容自行撐開計算，所以采用hasLayout=true/false來避免這種矛盾，當(dāng)hasLayout=true時，相當(dāng)于元素產(chǎn)生新的BFC，那元素就會對自身內(nèi)容進(jìn)行組織和計算；當(dāng)hasLayout=false時，就不會產(chǎn)生新的BFC，只能通過元素內(nèi)容自行撐開

那如何將hasLayout值設(shè)為true?

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

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

機(jī)制

瀏覽器在顯示頁面的時候，會先布局在進(jìn)行渲染，布局則是解析HTML各個元素，構(gòu)建DOM樹節(jié)點(diǎn)，再解析css，構(gòu)建cssTree,然后組合DomTree和CssTree，去除不可見元素，構(gòu)建render樹，再執(zhí)行reflow回流，根據(jù)renderTree計算每個課件元素的布局，最后執(zhí)行repaint通過繪制流程，將每個像素渲染到屏幕上

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

如何觸發(fā)reflow 和 repaint呢？

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

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

那應(yīng)該如何減少頁面的回流和重繪呢？

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