成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

BFC！Repaint！Reflow

zhoutao / 561人閱讀

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

BFC

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

BFC

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

hasLayout

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

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

display:inline-block;
height:值；
width:值;
float:left/right;
position:absolute;
Reflow 和 Repaint(影響前端性能的本源)

機(jī)制

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

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

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

1、改變?cè)氐膄ont-size
2、改變?cè)睾心Ｐ停簃arginborderpaddingwidth
3、改變?cè)仡伾?、背景屬?br>4、特殊：offsetscrollclientgetComputeedStyle

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112910.html

相關(guān)文章

  • 【CSS基礎(chǔ)】CSS常見概念

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

    hsluoyz 評(píng)論0 收藏0

  • 前端知識(shí)整理1

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

    sevi_stuo 評(píng)論0 收藏0

  • 前端知識(shí)整理1

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

    or0fun 評(píng)論0 收藏0

  • 前端知識(shí)整理1

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

    pubdreamcc 評(píng)論0 收藏0

  • 瀏覽器渲染那些事之 Reflow、Repaint

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

    morgan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

zhoutao

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<