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

資訊專欄INFORMATION COLUMN

從重繪重排角度講解transform的動(dòng)畫性能

BigTomato / 1406人閱讀

摘要：完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱為重繪。重排必然導(dǎo)致重繪，所以重排更加惡心。使用絕對(duì)位置定位頁(yè)面上的動(dòng)畫元素，將其脫離文檔流，可以有效的防止重排。

render樹的構(gòu)建

瀏覽器取回代碼后，首先會(huì)構(gòu)造DOM樹，根據(jù)HTML標(biāo)簽，構(gòu)造DOM樹。

之后會(huì)解析CSS樣式，解析的順序是瀏覽器的樣式 -> 用戶自定義的樣式 -> 頁(yè)面的link標(biāo)簽等引進(jìn)來(lái)的樣式 -> 寫在style標(biāo)簽里面的內(nèi)聯(lián)樣式

最后根據(jù)DOM樹以及解析的CSS樣式，構(gòu)造RENDER樹，在RENDER樹中，會(huì)把DOM樹中沒有的元素給去除，比如head標(biāo)簽以及里面的內(nèi)容，以及display:none的元素也會(huì)被去除。

一旦RENDER樹構(gòu)建完成，瀏覽器會(huì)把樹里面的內(nèi)容繪制在屏幕上。



  Beautiful page


    
  

    Once upon a time there was 
    a looong paragraph...
  

  
  

    Secret message
  

  
  

  ...

構(gòu)造的DOM樹如下

documentElement (html)
    head
        title
    body
        p
            [text node]
        
        div 
            [text node]
        
        div
            img
        
        ...

RENDER樹如下

root (RenderView)
    body
        p
            line 1
        line 2
        line 3
        ...
        
    div
        img
        
    ...
重繪(repaint)和重排(reflow)

當(dāng)DOM的變化影響了元素的幾何屬性（寬或高），瀏覽器需要重新計(jì)算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會(huì)因此受到影響。瀏覽器會(huì)使渲染樹中受到影響的部分失效，并重新構(gòu)造渲染樹。這個(gè)過(guò)程稱為重排。完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱為重繪。并不是所有的DOM變化都會(huì)影響幾何屬性，比如改變一個(gè)元素的背景色并不會(huì)影響元素的寬和高，這種情況下只會(huì)發(fā)生重繪。

重排必然導(dǎo)致重繪，所以重排更加惡心。其實(shí)我們一直研究的應(yīng)該是怎么避免觸發(fā)多次重排。

重排何時(shí)發(fā)生 
添加或者刪除可見的DOM元素
元素位置改變
元素尺寸改變
元素內(nèi)容改變（例如：一個(gè)文本被另一個(gè)不同尺寸的圖片替代）
頁(yè)面渲染初始化（這個(gè)無(wú)法避免）
瀏覽器窗口尺寸改變
瀏覽器的自動(dòng)優(yōu)化 
var ele = document.getElementById("myDiv");
ele.style.borderLeft = "1px";
ele.style.borderRight = "2px";
ele.style.padding = "5px";

乍一想，元素的樣式改變了三次，每次改變都會(huì)引起重排和重繪，所以總共有三次重排重繪過(guò)程，但是瀏覽器并不會(huì)這么笨，它會(huì)把三次修改“保存”起來(lái)（大多數(shù)瀏覽器通過(guò)隊(duì)列化修改并批量執(zhí)行來(lái)優(yōu)化重排過(guò)程），一次完成！但是，有些時(shí)候你可能會(huì)（經(jīng)常是不知不覺）強(qiáng)制刷新隊(duì)列并要求計(jì)劃任務(wù)立即執(zhí)行。獲取布局信息的操作會(huì)導(dǎo)致隊(duì)列刷新，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop, scrollLeft, scrollWidth, scrollHeight
clientTop, clientLeft, clientWidth, clientHeight
getComputedStyle() (currentStyle in IE)

因此，盡量不要在修改樣式或者布局信息時(shí)查詢樣式，因?yàn)椴樵兊臅r(shí)候會(huì)強(qiáng)制重排，導(dǎo)致瀏覽器無(wú)法優(yōu)化多次重排。

使用絕對(duì)位置定位頁(yè)面上的動(dòng)畫元素，將其脫離文檔流，可以有效的防止重排。比如有時(shí)候做動(dòng)畫特效時(shí)，我們通過(guò)設(shè)置position:absolute可以有效的減少重排。這讓我想到，以前做動(dòng)畫的時(shí)候通過(guò)修改margin-left屬性而不是left屬性絕對(duì)是一個(gè)很不好的做法。

transform是否可以避免重排重繪問(wèn)題

那么使用CSS3的transform來(lái)實(shí)現(xiàn)動(dòng)畫是否可以避免重排問(wèn)題？或者說(shuō)瀏覽器針對(duì)這一部分做了其他優(yōu)化？

經(jīng)過(guò)一番查找，答案如下：

CSS的最終表現(xiàn)分為以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers

按照中文的意思大致是 查找并計(jì)算樣式 -> 排布 -> 繪制 -> 組合層

這上面的幾個(gè)步驟有點(diǎn)類似于上文說(shuō)到的重排必定導(dǎo)致重繪，而查詢屬性會(huì)強(qiáng)制發(fā)生重排。所以上文提到的重排重繪內(nèi)容可以結(jié)合這里進(jìn)行理解。

由于transform是位于Composite Layers層，而width、left、margin等則是位于Layout層，在Layout層發(fā)生的改變必定導(dǎo)致Paint Setup and Paint -> Composite Layers，所以相對(duì)而言使用transform實(shí)現(xiàn)的動(dòng)畫效果肯定比left這些更加流暢。

而且就算拋開這一角度，在另一方面瀏覽器也會(huì)針對(duì)transform等開啟GPU加速。

參考文章

https://www.html5rocks.com/en...


http://www.phpied.com/renderi...


http://www.cnblogs.com/zichi/...

寫完文章后又重新查了一下關(guān)于CSS3動(dòng)畫性能方面的文章，發(fā)現(xiàn)大漠老師寫的這篇很不錯(cuò)，而且跟自己理解的觀點(diǎn)有部分相似，先放上來(lái)，之后再認(rèn)真看。

https://www.w3cplus.com/anima...

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

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

相關(guān)文章

  • 從重繪重排角度講解transform的動(dòng)畫性能

    摘要：完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱為重繪。重排必然導(dǎo)致重繪，所以重排更加惡心。使用絕對(duì)位置定位頁(yè)面上的動(dòng)畫元素，將其脫離文檔流，可以有效的防止重排。 render樹的構(gòu)建 showImg(https://segmentfault.com/img/remote/1460000006908155?w=630&h=292); 瀏覽器取回代碼后，首先會(huì)構(gòu)造DOM樹，根據(jù)H...

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

  • 從重繪重排角度講解transform的動(dòng)畫性能

    摘要：完成重排后，瀏覽器會(huì)重新繪制受影響的部分到屏幕，該過(guò)程稱為重繪。重排必然導(dǎo)致重繪，所以重排更加惡心。使用絕對(duì)位置定位頁(yè)面上的動(dòng)畫元素，將其脫離文檔流，可以有效的防止重排。 render樹的構(gòu)建 showImg(https://segmentfault.com/img/remote/1460000006908155?w=630&h=292); 瀏覽器取回代碼后，首先會(huì)構(gòu)造DOM樹，根據(jù)H...

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

  • 掌握瀏覽器重繪(repaint)重排(reflow))-前端進(jìn)階

    摘要：就如上面的概念一樣，單單改變?cè)氐耐庥^，肯定不會(huì)引起網(wǎng)頁(yè)重新生成布局，但當(dāng)瀏覽器完成重排之后，將會(huì)重新繪制受到此次重排影響的部分。因?yàn)殛?duì)列中，可能會(huì)有影響到這些值的操作，為了給我們最精確的值，瀏覽器會(huì)立即重排重繪。 showImg(http://ww1.sinaimg.cn/large/005Y4rCogy1fya3fh2jm3j30ku0dwtb2.jpg); 很多人都知道要減少瀏覽...

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

  • 你真的了解回流和重繪嗎

    摘要：對(duì)于復(fù)雜動(dòng)畫效果使用絕對(duì)定位讓其脫離文檔流對(duì)于復(fù)雜動(dòng)畫效果，由于會(huì)經(jīng)常的引起回流重繪，因此，我們可以使用絕對(duì)定位，讓它脫離文檔流。硬件加速加速比起考慮如何減少回流重繪，我們更期望的是，根本不要回流重繪。 回流和重繪可以說(shuō)是每一個(gè)web開發(fā)者都經(jīng)常聽到的兩個(gè)詞語(yǔ)，我也不例外，可是我之前一直不是很清楚這兩步具體做了什么事情。最近由于部門內(nèi)部要做分享，所以對(duì)其進(jìn)行了一些研究，看了一些博客和書...

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

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

0條評(píng)論

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