为什么说移动一个元素用Translate()比Pos:abs Top/Left好？

淡淡的烟草味﹌ 2022-09-25 03:23 204阅读 0赞

## 为什么说移动一个元素用Translate()比Pos:abs Top/Left好？ ##

整理来自：[http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/][http_www.paulirish.com_2012_why-moving-elements-with-translate-is-better-than-posabs-topleft]

**Distraction: Pixel snapping**  
1. Animating with Top/Left：  
[http://codepen.io/paulirish/pen/nkwKs][http_codepen.io_paulirish_pen_nkwKs]  
2. Animating with Translate  
[http://codepen.io/paulirish/pen/LsxyF][http_codepen.io_paulirish_pen_LsxyF]  
![image][]

运行以上两个示例，你会发现Top/left中的macbook顶部边缘部分看起来比第二个示例中的更加清晰。这是因为绝对定位的macbook是忠于像素的定位，但是translate()可以填充在sub-pixels位置。（原文：So this is due to the absolute positioned macbook sticks to pixel positions, whereas the translate()‘d one can interpolate at sub-pixel positions.）

**Distraction: Back to performance**  
![image][image 1]  
打开DevTool’s会看到两个非常不一样timeline。  
top/left花了大量的时间去绘制每一帧。所有的css包括好性的box-shdow，都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，GPU可以保持非常快并且可以给我们提供非常快的帧速率。  
**Guidelines for animation**  
1. 尽可能的使用CSS 关键帧动画或者CSS transition。浏览器可以优化大量绘制和组合的时间。  
2. 如果一定使用基于JS的动画，尽量使用requestAnimationFrame。尽量不要使用setTimeout， setInterval。  
3. 尽量不要在每一帧上改变inline元素，浏览器可以在多方面优化css中声明式动画。  
4. 使用2D transforms来代替pos:abs将会显著的提高FPS（每秒传输帧数），因为2D transform有更少的绘制时间和更流畅的动画。  
5. 通过Timeline Frams模式来观测什么让你变慢  
6. 在chroms://flags中打开“  
合成渲染层边框”，帮助你看到哪些元素正在被GPU render

--------------------

## 在Chrome中加速渲染 ##

整理来自：[http://www.html5rocks.com/zh/tutorials/speed/layers/][http_www.html5rocks.com_zh_tutorials_speed_layers]  
[https://segmentfault.com/a/1190000000490328][https_segmentfault.com_a_1190000000490328]  
**严重警告**  
你得知道， Chrome 拥有两套不同的渲染路径(rendering path)：硬件加速路径和旧软件路径(older software path)。在本文完成时，Windows，ChromeOS，Chrome for Android 上的所有页面用的都是硬件加速路径。在 Mac 和 Linux 上，只有那些需要复合(compositing)自身内容的页面用的是硬件加速路径。但是过不了多久，所有页面也都会使用硬件加速路径。

**从 DOM 到屏幕**

**了解层**

Chrome 中有不同类型的层： RenderLayer(负责 DOM 子树)，GraphicsLayer(负责 RenderLayer 的子树)。我们感兴趣的是后者，因为只有 GraphicsLayer 是作为纹理(texture)上传给 GPU 的。后面我将只用「层」来代表 GraphicsLayer。

简单介绍一下 GPU 术语：什么是纹理？可以把它想象成一个从主存储器(例如 RAM)移动到图像存储器(例如 GPU 中的 VRAM)的位图图像(bitmap image)。一旦它被移动到 GPU 中，你可以将它匹配成一个网格几何体(mesh geometry) —— 在视频游戏或 CAD 程序中，该技术通常是为骨骼的 3D 模型(skeletal 3D models)赋予“皮肤(skin)”。Chrome 使用纹理来从 GPU 上获得大块的页面内容。通过将纹理应用到一个非常简单的矩形网格就能很容易匹配不同的位置(position)和变形(transformation)。这也就是 3D CSS 的工作原理，它对于快速滚动也十分有效 —— 后面会详细讲。

**层创建标准**

什么情况下能使元素获得自己的层？虽然 Chrome 的启发式方法(heuristic)随着时间在不断发展进步，但是从目前来说，满足以下任意情况便会创建层：

*  3D 或透视变换(perspective transform) CSS 属性
 *  使用加速视频解码的 元素
 *  拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
 *  混合插件(如 Flash)
 *  对自己的 opacity 做 CSS 动画或使用一个动画变换的元素
 *  拥有加速 CSS 过滤器的元素
 *  元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
 *  元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

正如前面提到的，层对于移动静态 web 内容十分有效。通常，Chrome 会将一个层的内容在作为纹理上传到 GPU 前先绘制(paint)进一个位图中。如果内容不会改变，那么就没有必要重绘(repaint)。这样处理很好：花在重绘上的时间可以用来做别的事情，例如运行 JavaScript，如果绘制的时间很长，还会造成动画的故障与延迟。

看下开发者工具中的时间轴：层在反复旋转的过程中没有发生绘制操作。  
可**如果层的内容发生改变，那就需要重绘了**。

**放在一起： 从 DOM 到屏幕**

那么 Chrome 是如何将 DOM 转变成一个屏幕图像的呢？从概念上讲，它：

1.  获取 DOM 并将其分割为多个层
2.  将每个层独立的绘制进位图中
3.  将层作为纹理上传至 GPU
4.  复合多个层来生成最终的屏幕图像。  
    当 Chrome 首次为一个 web 页面创建一个帧(frame)时，以上步骤都需要执行。但对于以后出现的帧可以走些捷径：
    
     *  如果某些特定 CSS 属性变化，并不需要发生重绘。Chrome 可以使用早已作为纹理而存在于 GPU 中的层来重新复合，但会使用不同的复合属性(例如，出现在不同的位置，拥有不同的透明度等等)。
     *  如果层的部分失效，它会被重绘并且重新上传。如果它的内容保持不变但是复合属性发生变化(例如，层被转化或透明度发生变化)**，Chrome 可以让层保留在 GPU 中，并通过重新复合来生成一个新的帧**。

现在你应该清楚了，以层为基础的复合模型对渲染性能有着深远的影响。当不需要绘制时，复合操作的开销可以忽略不计，因此在试着调试渲染性能问题时，首要目标就是要避免层的重绘。精明的程序员可能在看上面介绍的复合触发列表时意识到可以轻而易举的控制层的创建。但要注意不要盲目的创建层，因为它们并不是毫无开销：层会占用系统 RAM 与 GPU(在移动设备上尤其有限)的内存，并且拥有大量的层会因为记录哪些是可见的而引入额外的开销。许多层还会因为过大与许多内容重叠而导致“过度绘制(overdraw)”的情况发生，从而增加栅格化的时间。所以，谨慎的利用你所学到的知识！

需要注意的是，**如果图层中某个元素需要重绘，那么整个图层都需要重绘**。比如一个图层包含很多节点，其中有个gif图，gif图的每一帧，都会重回整个图层的其他节点，然后生成最终的图层位图。所以这需要通过特殊的方式来强制gif图属于自己一个图层（translateZ(0)或者translate3d(0,0,0)），CSS3的动画也是一样（好在绝大部分情况浏览器自己会为CSS3动画的节点创建图层）

--------------------

## 示例 ##

在控制台打开显示渲染：  
![这里写图片描述][20160812170253261]  
写了两个例子：  
**示例1：** [http://codepen.io/GitKou/pen/rLoEAZ][http_codepen.io_GitKou_pen_rLoEAZ]

①  
![这里写图片描述][20160812171244024]  
这里给每个li: transform: translate3d(0, 0, 0);新建了图层，所以就算在中间插入节点，后面的节点也不会被重绘，只是**Chrome 使用纹理来从 GPU 上获得大块的页面内容。通过将纹理应用到一个非常简单的矩形网格就能很容易匹配不同的位置(position)和变形(transformation)。**  
②  
![这里写图片描述][20160812171540152]  
如果将li: transform: translate3d(0, 0, 0);注释掉，会发现后面的li都被重绘了；

**示例2：**[https://codepen.io/GitKou/pen/BzvARr][https_codepen.io_GitKou_pen_BzvARr]

--------------------

扩展阅读：[消除疑问：CSS动画 VS JavaScript][CSS_ VS JavaScript]

[http_www.paulirish.com_2012_why-moving-elements-with-translate-is-better-than-posabs-topleft]: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
[http_codepen.io_paulirish_pen_nkwKs]: http://codepen.io/paulirish/pen/nkwKs
[http_codepen.io_paulirish_pen_LsxyF]: http://codepen.io/paulirish/pen/LsxyF
[image]: http://paulirish.com/wp-content/uploads/2012/12/dubstep-effect1.gif
[image 1]: http://paulirish.com/wp-content/uploads/2012/12/timeline-frames-macbook1.png
[http_www.html5rocks.com_zh_tutorials_speed_layers]: http://www.html5rocks.com/zh/tutorials/speed/layers/
[https_segmentfault.com_a_1190000000490328]: https://segmentfault.com/a/1190000000490328
[20160812170253261]: /images/20220718/fe27ce6eb1aa44ce8a7bbf960c245084.png
[http_codepen.io_GitKou_pen_rLoEAZ]: http://codepen.io/GitKou/pen/rLoEAZ
[20160812171244024]: /images/20220718/096b1dcb61b84f3c9ab44a7144c682df.png
[20160812171540152]: /images/20220718/80133a951356497ea12a0cda4c14bac6.png
[https_codepen.io_GitKou_pen_BzvARr]: https://codepen.io/GitKou/pen/BzvARr
[CSS_ VS JavaScript]: https://github.com/classicemi/blog/issues/3