瀏覽器中重繪以及回流的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)瀏覽器中重繪以及回流的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁設(shè)計及定制網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站制作,高端網(wǎng)頁制作,對成都服務(wù)器托管等多個行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗的網(wǎng)站建設(shè)公司。專業(yè)網(wǎng)站設(shè)計,網(wǎng)站優(yōu)化推廣哪家好,專業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

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

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

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

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

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

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

3.觸發(fā)回流的操作
1.調(diào)整窗口大小（Resizing 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é)點偽類的激活)（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.設(shè)置 style 屬性的值 （Setting a property of the style attribute）

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

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

感謝各位的閱讀！關(guān)于“瀏覽器中重繪以及回流的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

分享名稱：瀏覽器中重繪以及回流的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://muchs.cn/article4/eigoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、ChatGPT、網(wǎng)頁設(shè)計公司、網(wǎng)站內(nèi)鏈、定制開發(fā)、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)