瀏覽器中重繪以及回流的概念解析

這篇文章帶給大家的內容是關於瀏覽器中重繪以及回流的概念解析 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

1.渲染樹(render tree)
1.瀏覽器把取得到的HTML程式碼解析成一棵DOM樹，HTML中的每個標籤（tag）都是DOM樹中的一個節點，根節點就是我們常用的document物件。 DOM樹裡包含了HTML所有標籤，包括display：none隱藏，還有用JS動態新增的元素等；

2.瀏覽器把所有樣式（使用者定義的css和使用者代理程式）解析成樣式結構體，在解析過程中會去掉瀏覽器不能辨識的樣式，例如IE會去掉-moz開頭的樣式，而Firefox會去掉_開頭的樣式；

3.DOM樹和樣式結構體組合後建構render tree（渲染樹），render tree類似DOM樹，但差別很大，render tree 能辨識樣式，render tree的每一個節點都有自己的樣式，而且render tree中不包含隱藏的節點（如display ：none的節點，還有head節點），因為這些節點不會用來呈現，而且不會影響呈現。

2.重繪與回流的定義
重繪：目前元素的樣式(背景顏色、字體顏色等)改變的時候，我們只需要把改變的元素重新的渲染一下即可，重繪對瀏覽器的效能影響較小，所以一般不考慮。

發生重繪的情況：改變容器的外觀風格等，例如background：black等。改變外觀，不改變佈局，不影響其他的dom。

回流：是指瀏覽器為了重新渲染部分或全部的文件而重新計算文件中元素的位置和幾何構造的過程。
因為回流可能導致整個dom樹的重新構造，所以是性能的一大殺手
一個元素的回流導致了其所有子元素以及DOM中緊隨其後的祖先元素的隨後的回流.

3.觸發回流的操作
1.調整視窗大小（Resizing the window）

2.改變字體（Changing the font )

3.增加或移除樣式表（Adding or removing a stylesheet）

4.內容變化，例如使用者在input框中輸入文字（Content changes, such as a user typing text in an input box）

5.啟動CSS 偽類，如:hover (IE 中為兄弟結點偽類的激活)（Activation of CSS pseudo classes such as :hover (in IE the activation of the pseudo class of a sibling)

6.操作class 屬性（Manipulating the class attribute）

7.腳本操作DOM（A script manipulating the DOM）

8.計算offsetWidth 和offsetHeight 屬性（Calculating offsetWidth and offsetHeight）

9.設定style 屬性的值（Setting a property of the style attribute）

10.fixed定位的元素,在拖曳滾動條的時候會一直回流

如何避免回流
1.  一起變化：如果要改變一個元素的樣式，可以將所有樣式集中在一個class上面一次變化，而不是變化幾次
2.  具有動畫效果請使用absolute
3.  避免使用表格佈局
4.  不要使用CSS表達式
5.  在最末改變元素
6. 動畫移動時候，要控制
例如我們拖曳元素時候，我是在他x或y座標改變5px才操作，這樣雖說降低了平滑度，但是對效能有提高
7.  如果你想讓複雜的表現發生改變，例如動畫效果，那麼請在這個流動線之外實現它。使用position-absolute或position-fixed來實現它。
8.  既然計算offsetWidth也會引起回流,那麼就拿一個變量保存它
9.  當我們需要向文檔中添加節點時，可以用文檔碎片的方式去解決這個問題的，當我們需要在DOM中加入新的元素的時候，先將其放在一個容器中，然後統一添加，這樣就只產生了一次回流

相關推薦：

# #js中自執行函數進行呼叫的兩種方法

js中的本地物件&內建物件&宿主物件的分析總結#

以上是瀏覽器中重繪以及回流的概念解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！