国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

頁(yè)面渲染性能控制-重繪與回流

cooxer / 2760人閱讀

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

瀏覽器解析代碼過程

頁(yè)面的顯示過程分為以下幾個(gè)階段：

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

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

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

reflow:當(dāng)render樹的一部分或者全部因?yàn)榇笮∵吘嗟葐栴}發(fā)生改變而需要重建的過程，叫做回流
repaint:當(dāng)諸如顏色背景等不會(huì)引起頁(yè)面布局變化，而只需要重新渲染的過程叫做重繪

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

什么會(huì)引起回流

頁(yè)面渲染初始化

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

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

窗口resize事件觸發(fā)

最復(fù)雜的一種：獲取某些屬性，引發(fā)回流 很多瀏覽器會(huì)對(duì)回流做優(yōu)化，他會(huì)等到足夠數(shù)量的變化發(fā)生，在做一次批處理回流。
但是除了render樹的直接變化。
當(dāng)獲取一些屬性時(shí)，瀏覽器為了獲得正確的值也會(huì)觸發(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"; // 再一次 回流+重繪, 沒想到吧，改變字體大小也會(huì)回流

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

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

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

減少回流

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

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

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

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

display:none和visibility：hidden會(huì)產(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

  • 頁(yè)面渲染性能控制-重繪與回流

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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