成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

性能：深入理解瀏覽器渲染原理 reflow & repaint

WelliJhon / 2495人閱讀

摘要：之后，如果渲染樹發(fā)生了變動(dòng)，那么可能會(huì)觸發(fā)回流或重繪中的一個(gè)或二者。在書寫時(shí)要避免不必要的層級(jí)，書寫時(shí)避免嵌套過(guò)深規(guī)則過(guò)于復(fù)雜，尤其是后代選擇器，匹配選擇器也會(huì)耗費(fèi)更多的。

剛?cè)胄星岸说臅r(shí)候是不是經(jīng)?？吹接形恼抡f(shuō)盡量不要用CSS通配符*，CSS選擇器層疊最好不要超過(guò)三層，HTML少使用table，結(jié)構(gòu)也要盡量簡(jiǎn)單一些...這一切說(shuō)的不無(wú)道理，過(guò)多的使用確實(shí)會(huì)造成瀏覽器渲染的性能降低，當(dāng)你認(rèn)識(shí)了reflow和repaint之后，你會(huì)發(fā)現(xiàn)這些還真不能用太多。

一、瀏覽器渲染過(guò)程

不同的瀏覽器渲染過(guò)程實(shí)際上并不相同（由渲染引擎決定），但是依舊存在一致的部分，大致過(guò)程如下圖：

解析HTML以構(gòu)建DOM樹：渲染引擎解析HTML文檔，轉(zhuǎn)換樹中的HTML標(biāo)簽或JS生成的標(biāo)簽生成DOM節(jié)點(diǎn)

解析CSS以構(gòu)建樣式結(jié)構(gòu)體：渲染引擎解析CSS（包括外部CSS文件、樣式元素以及JS生成的樣式）成樣式結(jié)構(gòu)體，根據(jù)CSS選擇器計(jì)算出節(jié)點(diǎn)的樣式

構(gòu)建渲染樹：從根節(jié)點(diǎn)遞歸調(diào)用，計(jì)算每一個(gè)元素的大小、位置以及每個(gè)節(jié)點(diǎn)所應(yīng)該出現(xiàn)在屏幕上的精確坐標(biāo)

繪制渲染樹：渲染引擎遍歷渲染樹將其繪制出來(lái)

二、什么是 reflow & repaint

其實(shí)在上面瀏覽器渲染過(guò)程中的第三步和第四步分別就是回流（reflow）和重繪（repaint）。當(dāng)?shù)谝淮未蜷_一個(gè)頁(yè)面時(shí)，至少會(huì)有一次回流和重繪。之后，如果渲染樹發(fā)生了變動(dòng)，那么可能會(huì)觸發(fā)回流或重繪中的一個(gè)或二者。

回流：如果渲染樹的節(jié)點(diǎn)發(fā)生了結(jié)構(gòu)性變化，例如寬高、位置、隱藏上有變化時(shí)，那么就會(huì)觸發(fā)一次回流
重繪：如果渲染樹的節(jié)點(diǎn)發(fā)生了非結(jié)構(gòu)性變化，例如背景色、顏色、字體上有變化時(shí)，那么就會(huì)觸發(fā)一次重繪

回流必將引起重繪，而重繪不一定會(huì)引起回流。回流的成本比重繪的成本要高得多，因?yàn)橐粋€(gè)節(jié)點(diǎn)的回流很有可能導(dǎo)致子結(jié)點(diǎn)，父節(jié)點(diǎn)回流。

三、觸發(fā) reflow & repaint

頁(yè)面初始化渲染

DOM元素的添加、修改、刪除

移動(dòng)DOM或著DOM發(fā)生了動(dòng)畫

resize瀏覽器窗口、滾動(dòng)頁(yè)面

修改DOM元素的字體顏色

激活CSS偽類

某個(gè)樣式的添加、修改、刪除

display: none會(huì)觸發(fā)reflow，visibility: hidden只會(huì)觸發(fā)repaint，因?yàn)闆](méi)有發(fā)生位置變化

讀取元素的某些屬性(沒(méi)想到吧...)

現(xiàn)代瀏覽器會(huì)對(duì)回流做優(yōu)化，它會(huì)等到足夠數(shù)量的變化發(fā)生，再做一次批處理回流。但是當(dāng)獲取某些屬性時(shí)，瀏覽器為了獲得正確的值也會(huì)提前觸發(fā)回流，這樣就使得瀏覽器的優(yōu)化失效了，這些屬性包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、調(diào)用了getComputedStyle()或者IE的currentStyle

四、減少 reflow & repaint

回流和重繪是不可避免的，我們只能說(shuō)將它們對(duì)性能的影響減到最小，既然我們知道什么情況會(huì)觸發(fā)它們，那就從這些方面入手：

讓需要改變的元素進(jìn)行“離線處理”，處理完后一起更新

使用DocumentFragment進(jìn)行緩存操作，觸發(fā)一次回流和重繪

使用display: none，觸發(fā)兩次回流和重繪（由于display: none的元素不在渲染樹中，對(duì)隱藏的元素操作不會(huì)引發(fā)其他元素的回流，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時(shí)觸發(fā)2次回流）

將需要多次回流的元素的position屬性設(shè)為absolute或fixed（設(shè)為float沒(méi)有完全脫離文檔流，這個(gè)很微妙），這樣元素就脫離了文檔流，它的變化不會(huì)影響到其他元素的布局，不會(huì)導(dǎo)致一個(gè)完整回流

不要把DOM節(jié)點(diǎn)的屬性值放在一個(gè)循環(huán)里作為循環(huán)的變量，這會(huì)導(dǎo)致大量地讀寫這個(gè)節(jié)點(diǎn)的屬性

不要一條一條地修改樣式，將多次改變樣式屬性的操作合并成一次（一般人也不會(huì)這樣做）

不要用table布局，table中某個(gè)元素一旦觸發(fā)回流就會(huì)導(dǎo)致table里所有的其它元素回流。在適合用table的場(chǎng)合，可以設(shè)置table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限制回流的影響范圍（一般我們可以通過(guò)ul li的布局替代之）

避免使用CSS的JavaScript表達(dá)式（這種規(guī)則已過(guò)時(shí)）

總之，在以后的開發(fā)中我們要盡量避免大量、頻繁的操作DOM元素，因?yàn)镈OM操作的代價(jià)實(shí)在是太昂貴了（這也是Virtual DOM應(yīng)運(yùn)而生的原因）。在書寫HTML時(shí)要避免不必要的層級(jí)，書寫CSS時(shí)避免嵌套過(guò)深、規(guī)則過(guò)于復(fù)雜，尤其是后代選擇器，匹配選擇器也會(huì)耗費(fèi)更多的CPU。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112647.html

相關(guān)文章

  • 前端性能之回流與重繪(reflow && repaint)

    摘要：寫在金三銀四之際。一個(gè)節(jié)點(diǎn)觸發(fā)了，瀏覽器會(huì)檢查中其他所有節(jié)點(diǎn)的顯示方式一個(gè)節(jié)點(diǎn)觸發(fā)了會(huì)導(dǎo)致它的祖先節(jié)點(diǎn)，后代節(jié)點(diǎn)以及在它之后的節(jié)點(diǎn)全部。對(duì)性能的影響大于。解決方式控制我們無(wú)力去改變，對(duì)性能損害的程度，我們能做的只有減少它們發(fā)生的次數(shù)。 寫在金三銀四之際。 因?yàn)榉N種原因想要謀求新的發(fā)展，不得已翻起了塵封已久的高程書；寫起了各種經(jīng)典CSS布局；回顧起記憶略顯模糊的幾個(gè)項(xiàng)目。感慨著太多太多...

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

  • 瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

    摘要：渲染層合并對(duì)頁(yè)面中元素的繪制是在多個(gè)層上進(jìn)行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負(fù)責(zé)子樹和負(fù)責(zé)的子樹，只有是作為紋理上傳給的。整個(gè)圖在中其實(shí)有幾種不同的層類型渲染層，這是負(fù)責(zé)對(duì)應(yīng)子樹圖形層，這是負(fù)責(zé)對(duì)應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡(jiǎn)單了解一下瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面的大致過(guò)程： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

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

  • 瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

    摘要：渲染層合并對(duì)頁(yè)面中元素的繪制是在多個(gè)層上進(jìn)行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負(fù)責(zé)子樹和負(fù)責(zé)的子樹，只有是作為紋理上傳給的。整個(gè)圖在中其實(shí)有幾種不同的層類型渲染層，這是負(fù)責(zé)對(duì)應(yīng)子樹圖形層，這是負(fù)責(zé)對(duì)應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡(jiǎn)單了解一下瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面的大致過(guò)程： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

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

  • 瀏覽器渲染流程&Composite（渲染層合并）簡(jiǎn)單總結(jié)

    摘要：渲染層合并對(duì)頁(yè)面中元素的繪制是在多個(gè)層上進(jìn)行的。擁有兩套不同的渲染路徑硬件加速路徑和舊軟件路徑中有不同類型的層負(fù)責(zé)子樹和負(fù)責(zé)的子樹，只有是作為紋理上傳給的。整個(gè)圖在中其實(shí)有幾種不同的層類型渲染層，這是負(fù)責(zé)對(duì)應(yīng)子樹圖形層，這是負(fù)責(zé)對(duì)應(yīng)子樹。 梳理瀏覽器渲染流程 首先簡(jiǎn)單了解一下瀏覽器請(qǐng)求、加載、渲染一個(gè)頁(yè)面的大致過(guò)程： DNS 查詢 TCP 連接 HTTP 請(qǐng)求即響應(yīng) 服務(wù)器響應(yīng) 客戶...

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

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

0條評(píng)論

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