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

資訊專欄INFORMATION COLUMN

回流、重繪及其優(yōu)化

Clect / 716人閱讀

摘要：回流重繪及其優(yōu)化渲染過程渲染引擎通過通過網(wǎng)絡請求接收渲染內容解析抽象抽象出布局繪畫抽象渲染引擎的第一步是解析文檔并將解析的元素轉換為樹中的實際節(jié)點。

回流、重繪及其優(yōu)化 渲染過程

渲染引擎通過通過網(wǎng)絡請求接收渲染內容

解析HTML抽象DOM tree

抽象出Render tree

布局（layout）render tree

繪畫render tree

抽象DOM tree 
渲染引擎的第一步是解析html文檔并將解析的元素轉換為dom樹中的實際dom節(jié)點。
抽象CSSOM tree 
當瀏覽器解析dom的時候，遇到link標簽，引用外部的css樣式表，引擎會將css抽象成cssom
構建渲染樹 
HTML中的可視指令與來自cssom樹的樣式數(shù)據(jù)結合使用來創(chuàng)建渲染樹。

為了構建渲染樹，瀏覽器大致如下：

從dom樹的根開始，遍歷每個可見節(jié)點。某些節(jié)點不可見（例如，腳本標記，元標記等），并且由于它們未反映在呈現(xiàn)的輸出中而被省略。display:none 也會使節(jié)點省略

對于每個可見節(jié)點，瀏覽器找到適當?shù)钠ヅ鋍ssom規(guī)則并應用它們

它會發(fā)布帶有內容和計算樣式的可見節(jié)點

每個渲染器代表一個矩形區(qū)域，通常對應于一個節(jié)點的CSS框。

它包括幾何信息，如寬度，高度和位置

渲染樹的布局 
當渲染器被創(chuàng)建并添加到樹中時，它沒有位置和大小。計算這些值稱為布局。
html使用基于流的布局模型，這意味著大多數(shù)時候它可以一次性計算幾何。坐標系相對于根渲染器。使用頂部和左側坐標。


布局是一個遞歸過程，從根元素開始，也就是html，每個渲染器都會去計算他自己的位置和大小
繪制渲染樹 
在這個階段，遍歷渲染器樹，調用渲染器的paint（）方法在屏幕上顯示內容。

渲染分為全局渲染和增量渲染

處理腳本和樣式表的順序 
當解析器到達script標記時，腳本將被立即解析并執(zhí)行。
文檔的解析將暫停，直到腳本執(zhí)行完畢。
這意味著該過程是同步的

這也是為什么把script標簽放在body結束之前

html5添加了一個選項，將腳本標記為異步，以便它可以被其他線程解析和執(zhí)行。

回流和重繪（reflow和repaint）

回流： 意味著元素的內容、結構、位置或尺寸發(fā)生了變化，需要重新計算樣式和渲染樹；

重繪：意味著元素發(fā)生的改變只影響了節(jié)點的一些樣式（背景色，邊框顏色，文字顏色等），只需要應用新樣式繪制這個元素就可以了；

何時觸發(fā)回流和重繪

repaint重繪：

reflow回流必定引起repaint重繪，重繪可以多帶帶觸發(fā)

背景色、顏色、字體改變（注意：字體大小發(fā)生變化時，會觸發(fā)回流）

reflow回流：

頁面第一次渲染（初始化）

DOM樹變化（如：增刪節(jié)點）

Render樹變化（如：padding改變）

瀏覽器窗口resize

當你查詢布局信息，包括offsetLeft、offsetTop、offsetWidth、offsetHeight、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、調用了getComputedStyle()或者IE的currentStyle時，瀏覽器為了返回最新值，會觸發(fā)回流。

優(yōu)化渲染性能，減少回流和重繪

減少reflow和repaint

盡量避免改變布局屬性。如width, height, left, top。

除了transforms 或者 opacity屬性都會引起重繪，做動畫的時候要注意，盡量使用這兩個屬性；

使用Flexbox。

避免多次讀取部分布局屬性（同上）

將復雜的節(jié)點元素脫離文檔流，降低回流成本

javascript

避免使用setTimeout setInterval 來更新視圖，這會在render之后提交修改需求

在micro-tasks中修改dom。這會在render之前提交修改需求

把script標簽放在body結束之前，或者使用異步script(defer， async)

把計算量大的js放在workers執(zhí)行，例如解析一個大的json文件

CSS

減少選擇器的復雜性。

避免逐個修改節(jié)點樣式，盡量一次性修改，減少style修改所影響元素的數(shù)量,使用cssText來替代要多次修改的style屬性

// 設置單個屬性
elt.style.color = "blue"; 

// 在單個語句中設置多個樣式
elt.style.cssText = "color: blue; border: 1px solid black"; 

// 在單個語句中設置多個樣式
elt.setAttribute("style", "color:red; border: 1px solid blue;");

通過改變類名來修改樣式

DOM

使元素脫離文檔流

對其應用多重修改

把元素帶回文檔中

這個過程會觸發(fā)兩次回流，第一步和第三步。把會觸發(fā)多次回流的步驟放在第二步

三種基本方法：

display:none，然后修改樣式，然后在恢復

使用文檔片段（document fragment）在當前dom樹之外構建一個子樹，再把他拷貝回文檔。

var fragment = document.createDocumentFragment()
... 在這里進行dom操作，可以減少回流和重繪的次數(shù)
document.getElementById("#app").appendChild(fragment)

將原始元素拷貝到一個脫離文檔的節(jié)點中，修改副本，完成后替換原始元素

var old = document.getElementById("#app")
var clone = old.cloneNode(true)
... 在這里進行dom操作，可以減少回流和重繪的次數(shù)
old.parentNode.replaceChild(clone, old)

緩存布局信息

前面提到在查詢布局信息（offsetLeft...）的時候也會引起回流，我們在使用的時候可以把布局信息緩存起來，減少回流次數(shù)

這里貼上<<高性能javascript>>中的例子：把myElement元素沿對角線移動，每次移動一個像素，從100100的位置開始，到500500的位置結束。在timeout循環(huán)體中你可以使用下面的方法

// 低效的
myElement.style.left = 1 + myElement.offsetLeft + "px"
myElement.style.top = 1 + myElement.offsetTop + "px"
if (myElement.offsetTop >= 500) {
  stopAnimation();
}
// 優(yōu)化
// 在循環(huán)外層獲取初始值
var current = myElement.offsetLeft
.
.
.
// 直接使用current變量，不再查詢偏移量
current++
myElement.style.left = current + "px"
myElement.style.top = current + "px"
if (current >= 500) {
  stopAnimation();
}

使元素進行動畫效果的時候脫離文檔流
在元素發(fā)生動畫效果的時候，會引起底部元素的回流，這個影響可能很大，也可能很小，取決于元素在文檔流的位置

動畫元素使用絕對定位，使其脫離文檔流

這里再進行旋轉，跳躍，都不會影響到整個頁面的回流

在動畫結束時恢復定位，從而只會下移一次文檔的其他元素。

參考DOM操作成本到底高在哪兒
參考高性能javascript
參考How JavaScript works: the rendering engine and tips to optimize its performance

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

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

相關文章

  • 瀏覽器的回流和重繪及其優(yōu)化方式

    摘要：何時發(fā)生有大量的用戶行為以及潛在的改變會觸發(fā)回流。這樣就會讓多次的回流重繪變成一次回流重繪。因為上的操作不會引發(fā)回流和重繪。參考文章回流與重繪性能讓變慢參考文章瀏覽器的重繪與重排 推薦了解的知識：基本的HTML，基本的JavaScript，以及一些css工作原理方面的知識 瀏覽器的渲染原理 css的加載和解析不會阻塞html文檔的解析 css的解析會阻塞js的執(zhí)行，必須等到CSSOM...

    hearaway 評論0 收藏0

  • 回流、重繪及其優(yōu)化

    摘要：回流重繪及其優(yōu)化渲染過程渲染引擎通過通過網(wǎng)絡請求接收渲染內容解析抽象抽象出布局繪畫抽象渲染引擎的第一步是解析文檔并將解析的元素轉換為樹中的實際節(jié)點。 回流、重繪及其優(yōu)化 渲染過程 渲染引擎通過通過網(wǎng)絡請求接收渲染內容 解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 繪畫render tree 抽象DOM tree 渲染引擎...

    Sike 評論0 收藏0

  • 回流、重繪及其優(yōu)化

    摘要：回流重繪及其優(yōu)化渲染過程渲染引擎通過通過網(wǎng)絡請求接收渲染內容解析抽象抽象出布局繪畫抽象渲染引擎的第一步是解析文檔并將解析的元素轉換為樹中的實際節(jié)點。 回流、重繪及其優(yōu)化 渲染過程 渲染引擎通過通過網(wǎng)絡請求接收渲染內容 解析HTML抽象DOM tree 抽象出Render tree 布局（layout）render tree 繪畫render tree 抽象DOM tree 渲染引擎...

    alaege 評論0 收藏0

  • 瀏覽器的回流和重繪

    摘要：例如對于復雜動畫效果，由于會經(jīng)常的引起回流重繪，因此，我們可以使用絕對定位，讓它脫離文檔流，成為一個單獨的圖層。 瀏覽器的渲染過程 showImg(https://segmentfault.com/img/bVblB7y?w=624&h=289); 從上面這個圖上，我們可以看到，瀏覽器渲染過程如下 解析HTML生成DOM樹，解析CSS生成CSSOM樹 將DOM樹和CSSOM樹結合生成...

    renweihub 評論0 收藏0

  • 瀏覽器的回流和重繪

    摘要：例如對于復雜動畫效果，由于會經(jīng)常的引起回流重繪，因此，我們可以使用絕對定位，讓它脫離文檔流，成為一個單獨的圖層。 瀏覽器的渲染過程 showImg(https://segmentfault.com/img/bVblB7y?w=624&h=289); 從上面這個圖上，我們可以看到，瀏覽器渲染過程如下 解析HTML生成DOM樹，解析CSS生成CSSOM樹 將DOM樹和CSSOM樹結合生成...

    zhoutk 評論0 收藏0

發(fā)表評論

0條評論

Clect

男|高級講師

TA的文章

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