BFC！Repaint！Reflow

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

摘要：很多人都問道是什么，為什么父元素加上定位會使得脫離文檔流的子元素會自動撐開父元素是布局里的概念，是一塊區(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其實就是IE567的BFC，是i.e.瀏覽器特有的;
在IE中，一個元素要么自己對自身內(nèi)容進行組織和尺寸計算，要么由自身內(nèi)容自行撐開計算，所以采用hasLayout=true/false來避免這種矛盾，當hasLayout=true時，相當于元素產(chǎn)生新的BFC，那元素就會對自身內(nèi)容進行組織和計算；當hasLayout=false時，就不會產(chǎn)生新的BFC，只能通過元素內(nèi)容自行撐開

那如何將hasLayout值設為true?

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

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

機制

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

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

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

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

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

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

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

云服務器 GPU云服務器 repaint reflow bfc bfc布局

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/112910.html

【CSS基礎】CSS常見概念

摘要：在中主要通過四個部分來描述，分別為。對于元素，負值會完全覆蓋前一個元素，會影響后面元素一起移動對于元素，元素脫離了普通文檔流，對其他元素沒有影響對于元素，可以通過負值進行覆蓋，最常見的應用是三列布局。瀏覽器渲染過程不同的瀏覽器渲染過程實際上并不相同，但是依舊存在相一致的部分，大致過程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

hsluoyz 2019-08-30 14:07 評論0 收藏0
前端知識整理1

前端知識整理，包括html/css/js，但不限于這三大類，持續(xù)更新中。本人水平有限，如有錯誤或更好的答案，歡迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三欄布局實現(xiàn)方案題目：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應 1.浮動布局實現(xiàn)方法：左欄、右欄分別左右浮動，定寬300px，中間不設置寬度自適應缺點：浮動元素脫離文檔流，需要清除浮...

sevi_stuo 2019-08-02 16:10 評論0 收藏0
前端知識整理1

前端知識整理，包括html/css/js，但不限于這三大類，持續(xù)更新中。本人水平有限，如有錯誤或更好的答案，歡迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三欄布局實現(xiàn)方案題目：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應 1.浮動布局實現(xiàn)方法：左欄、右欄分別左右浮動，定寬300px，中間不設置寬度自適應缺點：浮動元素脫離文檔流，需要清除浮...

or0fun 2019-08-30 15:43 評論0 收藏0
前端知識整理1

前端知識整理，包括html/css/js，但不限于這三大類，持續(xù)更新中。本人水平有限，如有錯誤或更好的答案，歡迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三欄布局實現(xiàn)方案題目：假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應 1.浮動布局實現(xiàn)方法：左欄、右欄分別左右浮動，定寬300px，中間不設置寬度自適應缺點：浮動元素脫離文檔流，需要清除浮...

pubdreamcc 2019-08-23 16:43 評論0 收藏0
瀏覽器渲染那些事之 Reflow、Repaint

摘要：原文鏈接瀏覽器渲染那些事之瀏覽器內(nèi)核渲染引擎在各個瀏覽器廠商你追我趕的形勢下，截止今日，產(chǎn)生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和引擎組成。原文鏈接瀏覽器渲染那些事之 Reflow、Repaint 瀏覽器內(nèi)核（渲染引擎）在各個瀏覽器廠商你追我趕的形勢下，截止今日，產(chǎn)生了很多不同的瀏覽器，各個瀏覽器本質大同小異，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 評論0 收藏0