BFC！Repaint！Reflow

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呢？

一、改變元素的font-size
二、改變元素盒模型：marginborderpaddingwidth
三、改變元素顏色、背景屬性
四、特殊：offsetscrollclientgetComputeedStyle

機制：在修改頁面元素樣式的時候，瀏覽器會邊reflow邊緩存，若是執行新操做，爲了獲得新樣式，瀏覽器會檢查緩存是否須要reflow，這樣就會耗時

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

一、減小js逐行修改元素的樣式
二、離線處理DOM操做，如克隆節點，進行源節點替換
三、減小樣式的從新計算，減小offsetscrollclient等
總之，減小操做DOM元素就行