从重绘重排角度讲解transform的动画性能

时间 2019-11-08

原文原文链接

render树的构建

浏览器取回代码后，首先会构造DOM树，根据HTML标签，构造DOM树。php

以后会解析CSS样式，解析的顺序是浏览器的样式 -> 用户自定义的样式 -> 页面的link标签等引进来的样式 -> 写在style标签里面的内联样式html

最后根据DOM树以及解析的CSS样式，构造RENDER树，在RENDER树中，会把DOM树中没有的元素给去除，好比head标签以及里面的内容，以及display:none的元素也会被去除。html5

一旦RENDER树构建完成，浏览器会把树里面的内容绘制在屏幕上。node

<html>
<head>
  <title>Beautiful page</title>
</head>
<body>
    
  <p>
    Once upon a time there was 
    a looong paragraph...
  </p>
  
  <div style="display: none">
    Secret message
  </div>
  
  <div><img src="..." /></div>
  ...
 
</body>
</html>

构造的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)

当DOM的变化影响了元素的几何属性（宽或高），浏览器须要从新计算元素的几何属性，一样其余元素的几何属性和位置也会所以受到影响。浏览器会使渲染树中受到影响的部分失效，并从新构造渲染树。这个过程称为重排。完成重排后，浏览器会从新绘制受影响的部分到屏幕，该过程称为重绘。并非全部的DOM变化都会影响几何属性，好比改变一个元素的背景色并不会影响元素的宽和高，这种状况下只会发生重绘。性能

重排必然致使重绘，因此重排更加恶心。其实咱们一直研究的应该是怎么避免触发屡次重排。优化

重排什么时候发生

添加或者删除可见的DOM元素
元素位置改变
元素尺寸改变
元素内容改变（例如：一个文本被另外一个不一样尺寸的图片替代）
页面渲染初始化（这个没法避免）
浏览器窗口尺寸改变

浏览器的自动优化

var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';

乍一想，元素的样式改变了三次，每次改变都会引发重排和重绘，因此总共有三次重排重绘过程，可是浏览器并不会这么笨，它会把三次修改“保存”起来（大多数浏览器经过队列化修改并批量执行来优化重排过程），一次完成！可是，有些时候你可能会（常常是不知不觉）强制刷新队列并要求计划任务当即执行。获取布局信息的操做会致使队列刷新，好比：动画

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

所以，尽可能不要在修改样式或者布局信息时查询样式，由于查询的时候会强制重排，致使浏览器没法优化屡次重排。spa

使用绝对位置定位页面上的动画元素，将其脱离文档流，能够有效的防止重排。好比有时候作动画特效时，咱们经过设置position:absolute能够有效的减小重排。这让我想到，之前作动画的时候经过修改margin-left属性而不是left属性绝对是一个很很差的作法。

transform是否能够避免重排重绘问题

那么使用CSS3的transform来实现动画是否能够避免重排问题？或者说浏览器针对这一部分作了其余优化？

通过一番查找，答案以下：

CSS的最终表现分为如下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers

按照中文的意思大体是查找并计算样式 -> 排布 -> 绘制 -> 组合层

这上面的几个步骤有点相似于上文说到的重排一定致使重绘，而查询属性会强制发生重排。因此上文提到的重排重绘内容能够结合这里进行理解。

因为transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变一定致使Paint Setup and Paint -> Composite Layers，因此相对而言使用transform实现的动画效果确定比left这些更加流畅。

并且就算抛开这一角度，在另外一方面浏览器也会针对transform等开启GPU加速。

参考文章

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

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

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

写完文章后又从新查了一下关于CSS3动画性能方面的文章，发现大漠老师写的这篇很不错，并且跟本身理解的观点有部分类似，先放上来，以后再认真看。

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