頁面重構和回流

zeyu 發布于2019-08-30 14:17 / 2046人閱讀

摘要：回流當元素的布局大小規模和顯示方式發生改變時，觸發的瀏覽器行為叫回流。而且，每個頁面都會在第一次加載時觸發回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對的操作對不同的屬性操作，影響不一樣。

在了解什么是重構和回流之前，我們應該先看看瀏覽器是怎么渲染的？

瀏覽器的渲染過程：

1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標簽，包括display:none和js動態添加的元素等）
2.處理CSS腳本，生成CSSOM樹（DOM和CSSOM是獨立的數據結構）
3.將DOM樹和CSSOM樹合并為渲染樹,render樹中不包含定位和幾何信息。雖然，render樹與dom樹類似但還是有區別的。render樹中不包含隱藏的節點 (比如display:none的節點，還有head節點)，因為這些節點不會用于呈現，而且不會影響呈現的，所以就不會包含到 render tree中。注意 visibility:hidden隱藏的元素還是會包含到 render tree中的，因為visibility:hidden 會影響布局(layout)，會占有空間。
4.對render樹中的內容進行布局，計算每個節點的幾何外觀
5.將渲染樹中的每個節點繪制到屏幕中.

什么是重構和回流

重構：當元素的某些屬性發生變化，這些屬性又只影響元素的外觀和風格，而不改變元素的布局、大小比如顏色、背景。此時觸發的瀏覽器行為稱作重構。
回流：當元素的布局、大小規模和顯示方式發生改變時，觸發的瀏覽器行為叫回流。而且，每個頁面都會在第一次加載時觸發回流。
注意：回流必將引起重繪，而重繪不一定伴隨回流。同時，回流對性能的影響要大于重構。

什么操作會引起重繪、回流

其實任何對render tree中元素的操作都會引起回流或者重繪，比如：

添加、刪除元素(回流+重繪)

隱藏元素，display:none(回流+重繪)，visibility:hidden(只重繪，不回流)

移動元素，比如改變top,left(jquery的animate方法就是,改變top,left不一定會影響回- 流)，或者移動元素到另外1個父元素中。(重繪+回流)

對style的操作(對不同的屬性操作，影響不一樣。比如，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變——比如文本改變或者圖片大小改變而引起的計算值寬度和高度改變；)

還有一種是用戶的操作，比如改變瀏覽器大小，改變瀏覽器的字體大小等(回流+重繪)

瀏覽器對回流的優化

因為，回流花銷很大，所以大部分瀏覽器對于回流都會進行優化，瀏覽器會維護1個隊列，把所有會引起回流、重繪的操作放入這個隊列，等隊列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush隊列，進行一個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。

雖然有了瀏覽器的優化，但有些代碼可能會強制瀏覽器提前flush隊列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style信息的時候，就會讓瀏覽器flush隊列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

請求了getComputedStyle(), 或者 IE的 currentStyle

當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要flush隊列，因為隊列中可能會有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發生或改變的布局信息無關，瀏覽器都會強行刷新渲染隊列。

如何減少回流、重繪

根據上面觸發回流和重繪的操作，我們可以知道只要減少對render tree的操作（合并多次多DOM和樣式的修改），并減少對一些style信息的請求，就能減少回流、重繪了,盡量利用好瀏覽器的優化策略。
具體做法有：
1.直接改變className，如果動態改變樣式，則使用cssText（考慮沒有優化的瀏覽器）
2.讓要操作的元素進行”離線處理”，處理完后一起更新：

使用DocumentFragment進行緩存操作,引發一次回流和重繪；

使用display:none技術，只引發兩次回流和重繪；

使用cloneNode(true or false) 和 replaceChild 技術，引發一次回流和重繪；

3.不要經常訪問會引起瀏覽器flush隊列的屬性，如果你確實要訪問，利用緩存
4.讓元素脫離動畫流，減少回流的Render樹的規模(即讓動畫的元素脫離文檔流，使用absolute定位等等)。

GPU云服務器云服務器頁面重構重構和設計模式回流js 服務器回流

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115911.html

頁面重構和回流

摘要：回流當元素的布局大小規模和顯示方式發生改變時，觸發的瀏覽器行為叫回流。而且，每個頁面都會在第一次加載時觸發回流。注意回流必將引起重繪，而重繪不一定伴隨回流。重繪回流對的操作對不同的屬性操作，影響不一樣。在了解什么是重構和回流之前，我們應該先看看瀏覽器是怎么渲染的？瀏覽器的渲染過程： 1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標簽，包括display:none和...

leejan97 2019-08-02 16:02 評論0 收藏0
html+css 核心知識總結

摘要：空元素，主要講下可算內聯元素，因為可與其他元素同行，且寬高對其起作用。提示對內聯元素寬高起作用，請使用談談對定位的理解生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。 Html 1.解釋，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

jindong 2019-08-29 15:14 評論0 收藏0
html+css 核心知識總結

摘要：空元素，主要講下可算內聯元素，因為可與其他元素同行，且寬高對其起作用。提示對內聯元素寬高起作用，請使用談談對定位的理解生成絕對定位的元素，相對于定位以外的第一個父元素進行定位。 Html 1.解釋，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項目涉及多語言，那么只能使用該編碼方式。是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

szysky 2019-08-02 10:19 評論0 收藏0
前端性能優化（JavaScript補充篇）

摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...

molyzzx 2019-08-19 14:42 評論0 收藏0
前端性能優化（JavaScript補充篇）

摘要：而像和會增加作用域鏈的長度，所以也會降低性能。但是用獲取一些屬性時，會不由自主地強迫隊列中的所有渲染事件前不完成。在條件增加時，所帶來的性能負擔要高于，因此建議使用。它代價昂貴，且容易失控。正巧看到在送書，于是乎找了找自己博客上記錄過的一些東西來及其無恥的蹭書了~~~ 小廣告：更多內容可以看我的博客以下內容均來自《高性能JavaScript》 JavaScript文件加載 ...

taoszu 2019-08-01 14:38 評論0 收藏0