transform的高性能原因

一、重排

DOM的变化影响到了元素的集合属性，浏览器需要进行重排，重排必然引起重绘。

1. 重排何时发生：

   • 元素位置改变
   • 元素尺寸改变
   • 元素内容改变
   • 页面渲染初始化（无法避免）
   • 浏览器窗口尺寸改变

2. 浏览器的自动优化

   （1）相邻的三次重排重绘，v8会用队列缓存起来，一次完成。

   （2）获取布局信息（如offsetTop等）的操作会导致队列刷新，队列强制刷新会导致计算任务立即执行。

3. 绝对定位的好处

   绝对定位会让元素脱离文档流，可以有效防止重排。

二、渲染过程

浏览器有2个重要的执行线程：主线程、合成线程。

主线程负责JavaScript、计算CSS样式、页面布局；合成线程负责将位图绘制到屏幕上。

1. 渲染过程

   构建DOM树 -> 构建CSSOM树 -> 执行Script -> 构建Render树 -> Layout布局 -> Paint重绘 -> Composite Layers组合层

   上面过程中，前六个过程都是主线程负责，只有最后一个组合层是合成线程负责。

2. transform

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

   另外，transform有GPU加速的支持。

–end–

---

• ← Previous Post
• Next Post →