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

資訊專欄INFORMATION COLUMN

頁面渲染性能控制-重繪與回流

Noodles / 854人閱讀

摘要：重繪只涉及樣式的改變，不涉及到布局。當(dāng)獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發(fā)回流。避免多次讀取等屬性。將復(fù)雜的元素絕對定位或固定定位，使它脫離文檔流。

瀏覽器解析代碼過程

頁面的顯示過程分為以下幾個階段：

生成DOM樹(包括display:none的節(jié)點)

在DOM樹的基礎(chǔ)上根據(jù)節(jié)點的集合屬性(margin,padding,width,height等)生成render樹(不包括display:none，head節(jié)點，但是包括visibility:hidden的節(jié)點)

在render樹的基礎(chǔ)上繼續(xù)渲染顏色背景色等樣式

reflow:當(dāng)render樹的一部分或者全部因為大小邊距等問題發(fā)生改變而需要重建的過程，叫做回流
repaint:當(dāng)諸如顏色背景等不會引起頁面布局變化，而只需要重新渲染的過程叫做重繪

通過上述定義，可以很明顯看出，重繪的代價要比回流小。重繪只涉及樣式的改變，不涉及到布局。重繪就好像給人染了一個頭發(fā)，而回流相當(dāng)于給人做了一次整形手術(shù)

什么會引起回流

頁面渲染初始化

DOM結(jié)構(gòu)變化，臉上整得親媽都認不出來了，所以會引發(fā)回流

render樹變化，比如減少了padding，增加border等等，改變頁面布局了

窗口resize事件觸發(fā)

最復(fù)雜的一種：獲取某些屬性，引發(fā)回流 很多瀏覽器會對回流做優(yōu)化，他會等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。
但是除了render樹的直接變化。
當(dāng)獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發(fā)回流。這樣就使得瀏覽器的優(yōu)化失效了 這些屬性包括

   offsetTop,     offsetLeft,     offsetWidth,     offsetHeight
   scrollTop/Left/Width/Height,
   clientTop/Left/Width/Height,
   width,height
   調(diào)用了getComputedStyle(), 或者 IE的 currentStyle

這段兒代碼是抄的，哈哈，大概解釋一下樣式改變引起的重繪和回流

var s = document.body.style;

s.padding = "2px"; // 回流+重繪

s.border = "1px solid red"; // 再一次 回流+重繪

s.color = "blue"; // 再一次重繪

s.backgroundColor = "#ccc"; // 再一次 重繪

s.fontSize = "14px"; // 再一次 回流+重繪, 沒想到吧，改變字體大小也會回流

document.body.appendChild(document.createTextNode("abc!"));  // 添加node，再一次 回流+重繪

可以看出，回流一定伴隨著重繪，而重繪卻可以多帶帶出現(xiàn)

回流對性能產(chǎn)生了一定的影響，盡管瀏覽器機智地幫我們進行了批處理，但是仍然存在著上述諸多闊怕的屬性，一獲取就回流。怎么解決？

減少回流

避免逐項更改樣式。最好一次性更改style屬性，或者將樣式列表定義為class并一次性更改class屬性。

避免循環(huán)操作DOM。創(chuàng)建一個documentFragment或div，在它上面應(yīng)用所有DOM操作，最后再把它添加到window.document。

避免多次讀取offsetLeft等屬性。無法避免則將它們緩存到變量。

將復(fù)雜的元素絕對定位或固定定位，使它脫離文檔流。否則回流代價十分高

display:none和visibility：hidden會產(chǎn)生回流與重繪

display：none指的是元素完全不陳列出來，不占據(jù)空間，涉及到了DOM結(jié)構(gòu)，故產(chǎn)生reflow與repaint
visibility：hidden指的是元素不可見但存在，保留空間，不影響結(jié)構(gòu)，故只產(chǎn)生repaint

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

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

相關(guān)文章

  • 頁面渲染性能控制-重繪與回流

    摘要：重繪只涉及樣式的改變，不涉及到布局。當(dāng)獲取一些屬性時，瀏覽器為了獲得正確的值也會觸發(fā)回流。避免多次讀取等屬性。將復(fù)雜的元素絕對定位或固定定位，使它脫離文檔流。 瀏覽器解析代碼過程 頁面的顯示過程分為以下幾個階段： 生成DOM樹(包括display:none的節(jié)點) 在DOM樹的基礎(chǔ)上根據(jù)節(jié)點的集合屬性(margin,padding,width,height等)生成render樹(不包...

    cooxer 評論0 收藏0

  • 你應(yīng)該要知道的重繪與重排

    摘要：合并樣式操作比如可以合并成批量修改使元素脫離文檔流，再對其進行操作，然后再把元素帶回文檔中，這種辦法可以有效減少重繪重排的次數(shù)。 前言 現(xiàn)代web框架大多都是數(shù)據(jù)驅(qū)動類的，比如 react, vue，所以開發(fā)者不需要直接接觸 DOM，修改 data 便可以驅(qū)動界面更新。但是作為前端工程師，了解瀏覽器的重繪與重排還是很有必要的，可以幫助我們寫出更好性能的 web 應(yīng)用。 瀏覽器的渲染 ...

    liukai90 評論0 收藏0

  • 瀏覽器渲染機制與相應(yīng)優(yōu)化策略

    摘要：瀏覽器渲染樹我們假設(shè)響應(yīng)后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當(dāng)前響應(yīng)瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹 我們假設(shè)HTTP響應(yīng)后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當(dāng)前HTTP響應(yīng)瀏覽器...

    suxier 評論0 收藏0

  • 瀏覽器渲染機制與相應(yīng)優(yōu)化策略

    摘要：瀏覽器渲染樹我們假設(shè)響應(yīng)后和文件已經(jīng)齊備了，此時瀏覽器會怎么做呢當(dāng)前響應(yīng)瀏覽器的普適渲染方式首先，瀏覽器會根據(jù)文件生成樹，載入文件構(gòu)建。 showImg(https://segmentfault.com/img/bVKUyX?w=630&h=292); 瀏覽器渲染樹 我們假設(shè)HTTP響應(yīng)后HTML和CSS、JavaScript文件已經(jīng)齊備了，此時瀏覽器會怎么做呢？當(dāng)前HTTP響應(yīng)瀏覽器...

    sushi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<