頁面重繪(repaints),回流(reflow),網上已經有很多介紹了,以前也只是看看,并沒有仔細理解,所以現在留點筆記

一些有用的連接

http://www.zhangxinxu.com/wordpress/2009/10/attention-reflow-to-make-web-faster/

http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

?

首先,要大概知道瀏覽器怎么渲染成頁面的

文檔初次加載時，瀏覽器引擎會解析HTML文檔來構建DOM樹，之后根據DOM元素的幾何屬性構建一棵用于渲染的樹。渲染樹的每個節點都有大小和邊距等屬性，類似于盒子模型（由于隱藏元素不需要顯示，渲染樹中并不包含DOM樹中隱藏的元素）。當渲染樹構建完成后，瀏覽器就可以將元素放置到正確的位置了，再根據渲染樹節點的樣式屬性繪制出頁面。

反正就是要知道盒模式,才方便理解重繪和回流

重繪(repaints)

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪

這是從網上抄來的一句話,還是很好理解的,改變外觀,不改變布局,不影響其他的dom

回流(reflow)

這個是重點

回流(reflow)這個名詞指的是網絡瀏覽器為了重新渲染部分或全部的文檔而重新計算文檔中元素的位置和幾何結構的過程。因為回流(reflow)在瀏覽器中屬于一種用戶主導的模塊化操作，所以知道如何去改進回流(reflow)時間以及知道各種文檔屬性（DOM節點深度，css的渲染效率，各種各樣的樣式改變）對回流(reflow)時間的影響對于開發人員講是很有幫助的。有時候，即使僅僅回流一個單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產生回流

從網上抄的,按我的理解就是回流是很容易操作出來的,而且很容易影響性能,所以我們要多留意,盡量不要引起回流,

那它為什么會影響性能了?

一個元素的回流導致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流.

這句話也是網上抄的.我的理解是回流不僅僅影響的是自己,還會影響到其他元素的重新布局,計算(包括樣式的計算)

反正最后總結一句話,就是回流影響很大,要理解它,盡量少讓它發生

?

哪些操作會產生回流了?

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. 減少不必要的DOM深度。因為無論你改變DOM節點樹上任何一個層級都會影響節點樹的每個層級——從根結點一直到修改的子節點。不必要的節點深度將導致執行回流時花費更多的時間。

2. 精簡css，去除沒有用處的css

3. 如果你想讓復雜的表現發生改變，例如動畫效果，那么請在這個流動線之外實現它。使用position-absolute或position-fixed來實現它。

4. 避免不必要的復雜的css選擇符，尤其是使用子選擇器，或消耗更多的CPU去做選擇器匹配。

5. 既然計算offsetWidth也會引起回流,那么就拿一個變量保存它

6. 一次性修改多個樣式,使用cssText ,或者直接加個className

?

注意：回流必將引起重繪，而重繪不一定會引起回流。

?

如何測試重繪和回流了？

我看網上說有一款測試工具Speed Tracer,但是在chrome web store里面已經找不到了!

然后我看到了一篇文章介紹查如何查看頁面渲染的 地址?http://www.ghugo.com/chrome-rendering-tools-1/

chrome Opera可以這么測試,ff,safari不知道怎么弄

它主要是能讓用戶看到頁面發生了渲染,并且渲染面積有多大(但是好像區分不了重繪和回流)

如何操作?

1.調出開發者管理工具(f12)

2.按esc鍵

3.選擇Rendering選項卡

4.勾選Show paint rectangles選項卡

如圖所示

?

操作一下,會發現,如果某個元素發生了渲染,會出現綠色的框,顯示渲染的面積

這個可以來測試下上面說的一些產生回流和渲染

1.fixed定位,拖動滾動條會一直回流

測試發現確實一直在渲染,但是還好只是對自己渲染,不影響其他的dom

?

2.調整窗口大小,縮放瀏覽器

測試發現整個頁面都在渲染,這個應該是影響比較大的回流了

?

3.刪除元素

沒刪除之前

刪除了

測試發現,會影響之前他后面的元素,但是不會影響之前的元素

?

4.改變字體

會影響本身以及他下面元素的渲染

?

5.觸發hover

如果只是重繪,只會影響到自己(比如改變背景,字體顏色)

如果是回流,會影響到他下面的元素都要回流(比如改變字體,高度)

?

6.計算offsetWidth和offsetHeight

這個沒測試出來頁面有渲染 -_-!

?

測試回流重繪是個麻煩的事情,暫時沒有找到一款工具能夠分清重繪和回流的

但是如果只是要查看頁面渲染的情況，chrome的Rendering就足夠了

?

信息來源：http://www.cnblogs.com/wtcsy/p/reflow.html

?

轉載于:https://www.cnblogs.com/sunshq/p/4186635.html

總結

以上是生活随笔為你收集整理的页面 渲染 回流 测试 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。