国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

頁(yè)面重構(gòu)和回流

leejan97 / 3178人閱讀

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

在了解什么是重構(gòu)和回流之前，我們應(yīng)該先看看瀏覽器是怎么渲染的？

瀏覽器的渲染過(guò)程：

1.處理HTML腳本，生成DOM樹（DOM樹里包含所有的HTML標(biāo)簽，包括display:none和js動(dòng)態(tài)添加的元素等）
2.處理CSS腳本，生成CSSOM樹（DOM和CSSOM是獨(dú)立的數(shù)據(jù)結(jié)構(gòu)）
3.將DOM樹和CSSOM樹合并為渲染樹,render樹中不包含定位和幾何信息。雖然，render樹與dom樹類似但還是有區(qū)別的。render樹中不包含隱藏的節(jié)點(diǎn) (比如display:none的節(jié)點(diǎn)，還有head節(jié)點(diǎn))，因?yàn)檫@些節(jié)點(diǎn)不會(huì)用于呈現(xiàn)，而且不會(huì)影響呈現(xiàn)的，所以就不會(huì)包含到 render tree中。注意 visibility:hidden隱藏的元素還是會(huì)包含到 render tree中的，因?yàn)関isibility:hidden 會(huì)影響布局(layout)，會(huì)占有空間。
4.對(duì)render樹中的內(nèi)容進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的幾何外觀
5.將渲染樹中的每個(gè)節(jié)點(diǎn)繪制到屏幕中.

什么是重構(gòu)和回流

重構(gòu)：當(dāng)元素的某些屬性發(fā)生變化，這些屬性又只影響元素的外觀和風(fēng)格，而不改變?cè)氐牟季?、大小比如顏色、背景。此時(shí)觸發(fā)的瀏覽器行為稱作重構(gòu)。
回流：當(dāng)元素的布局、大小規(guī)模和顯示方式發(fā)生改變時(shí)，觸發(fā)的瀏覽器行為叫回流。而且，每個(gè)頁(yè)面都會(huì)在第一次加載時(shí)觸發(fā)回流。
注意：回流必將引起重繪，而重繪不一定伴隨回流。同時(shí)，回流對(duì)性能的影響要大于重構(gòu)。

什么操作會(huì)引起重繪、回流

其實(shí)任何對(duì)render tree中元素的操作都會(huì)引起回流或者重繪，比如：

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

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

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

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

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

瀏覽器對(duì)回流的優(yōu)化

因?yàn)?，回流花銷很大，所以大部分瀏覽器對(duì)于回流都會(huì)進(jìn)行優(yōu)化，瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列，把所有會(huì)引起回流、重繪的操作放入這個(gè)隊(duì)列，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔，瀏覽器就會(huì)flush隊(duì)列，進(jìn)行一個(gè)批處理。這樣就會(huì)讓多次的回流、重繪變成一次回流重繪。

雖然有了瀏覽器的優(yōu)化，但有些代碼可能會(huì)強(qiáng)制瀏覽器提前flush隊(duì)列，這樣瀏覽器的優(yōu)化可能就起不到作用了。當(dāng)你請(qǐng)求向?yàn)g覽器請(qǐng)求一些 style信息的時(shí)候，就會(huì)讓瀏覽器flush隊(duì)列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight

scrollTop/Left/Width/Height

clientTop/Left/Width/Height

width,height

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

當(dāng)你請(qǐng)求上面的一些屬性的時(shí)候，瀏覽器為了給你最精確的值，需要flush隊(duì)列，因?yàn)殛?duì)列中可能會(huì)有影響到這些值的操作。即使你獲取元素的布局和樣式信息跟最近發(fā)生或改變的布局信息無(wú)關(guān)，瀏覽器都會(huì)強(qiáng)行刷新渲染隊(duì)列。

如何減少回流、重繪

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

使用DocumentFragment進(jìn)行緩存操作,引發(fā)一次回流和重繪；

使用display:none技術(shù)，只引發(fā)兩次回流和重繪；

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54543.html

相關(guān)文章

  • 頁(yè)面重構(gòu)和回流

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

    zeyu 評(píng)論0 收藏0

  • html+css 核心知識(shí)總結(jié)

    摘要：空元素，主要講下可算內(nèi)聯(lián)元素，因?yàn)榭膳c其他元素同行，且寬高對(duì)其起作用。提示對(duì)內(nèi)聯(lián)元素寬高起作用，請(qǐng)使用談?wù)剬?duì)定位的理解生成絕對(duì)定位的元素，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。 Html 1.解釋 ，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項(xiàng)目涉及多語(yǔ)言，那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

    jindong 評(píng)論0 收藏0

  • html+css 核心知識(shí)總結(jié)

    摘要：空元素，主要講下可算內(nèi)聯(lián)元素，因?yàn)榭膳c其他元素同行，且寬高對(duì)其起作用。提示對(duì)內(nèi)聯(lián)元素寬高起作用，請(qǐng)使用談?wù)剬?duì)定位的理解生成絕對(duì)定位的元素，相對(duì)于定位以外的第一個(gè)父元素進(jìn)行定位。 Html 1.解釋 ，主要從utf-8展開，utf-8是一種字符編碼，該編碼是全世界通用的，意思是假如項(xiàng)目涉及多語(yǔ)言，那么只能使用該編碼方式。 是使用html5文檔類型。告知瀏覽器的解析器，用什么文檔類型 ...

    szysky 評(píng)論0 收藏0

  • 前端性能優(yōu)化（JavaScript補(bǔ)充篇）

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

    molyzzx 評(píng)論0 收藏0

  • 前端性能優(yōu)化（JavaScript補(bǔ)充篇）

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

    taoszu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<