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

本篇文章給大家?guī)��?lái)的內(nèi)容是關(guān)于瀏覽器中重繪以及回流的概念解析 ，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

1.渲染樹(shù)(render tree)
1.瀏覽器把獲取到的HTML代碼解析成一棵DOM樹(shù)，HTML中的每個(gè)標(biāo)簽（tag）都是DOM樹(shù)中的一個(gè)節(jié)點(diǎn)，根節(jié)點(diǎn)就是我們常用的document對(duì)象。DOM樹(shù)里包含了HTML所有標(biāo)簽，包括display：none隱藏，還有用JS動(dòng)態(tài)添加的元素等；

2.瀏覽器把所有樣式（用戶定義的css和用戶代理）解析成樣式結(jié)構(gòu)體，在解析過(guò)程中會(huì)去掉瀏覽器不能識(shí)別的樣式，比如IE會(huì)去掉-moz開(kāi)頭的樣式，而Firefox會(huì)去掉_開(kāi)頭的樣式；

3.DOM樹(shù)和樣式結(jié)構(gòu)體組合后構(gòu)建render tree（渲染樹(shù)），render tree類似于DOM樹(shù)，但區(qū)別很大，render tree 能識(shí)別樣式，render tree的每一個(gè)節(jié)點(diǎn)都有自己的樣式，而且render tree中不包含隱藏的節(jié)點(diǎn)（比如display：none的節(jié)點(diǎn)，還有head節(jié)點(diǎn)），因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，而且不會(huì)影響呈現(xiàn)。

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

發(fā)生重繪的情形：改變?nèi)萜鞯耐庥^風(fēng)格等，比如background：black等。改變外觀，不改變布局，不影響其他的dom。

回流：是指瀏覽器為了重新渲染部分或者全部的文檔而重新計(jì)算文檔中元素的位置和幾何構(gòu)造的過(guò)程。
因?yàn)榛亓骺赡軐?dǎo)致整個(gè)dom樹(shù)的重新構(gòu)造，所以是性能的一大殺手
一個(gè)元素的回流導(dǎo)致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流.

3.觸發(fā)回流的操作
1.調(diào)整窗口大�。≧esizing the window）

2.改變字體（Changing the font）

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

4.內(nèi)容變化，比如用戶在input框中輸入文字（Content changes, such as a user typing text in an input box）

5.激活 CSS 偽類，比如 :hover (IE 中為兄弟結(jié)點(diǎn)偽類的激活)（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.計(jì)算 offsetWidth 和 offsetHeight 屬性（Calculating offsetWidth and offsetHeight）

9.設(shè)置 style 屬性的值 （Setting a property of the style attribute）

10.fixed定位的元素,在拖動(dòng)滾動(dòng)條的時(shí)候會(huì)一直回流

如何避免回流
1. 一起變化：如果要改變一個(gè)元素的樣式，可以將所有樣式集中在一個(gè)class上面一次變化，而不是變化幾次
2. 具有動(dòng)畫(huà)效果請(qǐng)使用absolute
3. 避免使用表格布局
4. 不要使用CSS表達(dá)式
5. 在最末改變?cè)��?
6. 動(dòng)畫(huà)移動(dòng)時(shí)候，要控制
比如我們拖動(dòng)元素時(shí)候，我是在他x或者y坐標(biāo)改變5px才操作，這樣雖說(shuō)降低了平滑度，但是對(duì)性能有提高
7. 如果你想讓復(fù)雜的表現(xiàn)發(fā)生改變，例如動(dòng)畫(huà)效果，那么請(qǐng)?jiān)谶@個(gè)流動(dòng)線之外實(shí)現(xiàn)它。使用position-absolute或position-fixed來(lái)實(shí)現(xiàn)它。
8. 既然計(jì)算offsetWidth也會(huì)引起回流,那么就拿一個(gè)變量保存它
9. 當(dāng)我們需要向文檔中添加節(jié)點(diǎn)時(shí)，可以用文檔碎片的方式去解決這個(gè)問(wèn)題的，當(dāng)我們需要給DOM中添加新的元素的時(shí)候，先將其放在一個(gè)容器中，然后統(tǒng)一添加，這樣就只產(chǎn)生了一次回流

相關(guān)推薦：

js中自執(zhí)行函數(shù)進(jìn)行調(diào)用的兩種方法

js中的本地對(duì)象&內(nèi)置對(duì)象&宿主對(duì)象的分析總結(jié)

以上就是瀏覽器中重繪以及回流的概念解析的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！