居中为什么用transform,而不是margin top/left

transform

transform 属于合成属性(composite property),对合成属性进行 transition/animation 动画将会创建一个合成层(composite layer),这使得被动画元素在一个独立的层中进行动画。通常情况下,浏览器会将一个层的内容先绘制进一个位图中,然后再作为纹理(texture)上传到 GPU,只要该层的内容不发生改变,就没必要进行重绘(repaint),浏览器会通过重新复合(recomposite)来形成一个新的帧。

margin top / left

top/left属于布局属性,该属性的变化会导致重排(reflow/relayout),所谓重排即指对这些节点以及受这些节点影响的其它节点,进行CSS计算->布局->重绘过程,浏览器需要为整个层进行重绘并重新上传到 GPU,造成了极大的性能开销。

小总结

对布局属性进行动画,浏览器需要为每一帧进行重绘并上传到 GPU 中
对合成属性进行动画,浏览器会为元素创建一个独立的复合层,当元素内容没有发生改变,该层就不会被重绘,浏览器会通过重新复合来创建动画帧

以下通过模拟测试在chrome上检测动画的FPS

在这里插入图片描述
左方的图片是通过改变元素top/left进行动画的帧率,而右方则是调用translate函数的帧率。我们可以明显看出左图的每一帧都执行了相对较长时间的paint,在每一帧内,cpu都需要计算该元素的其他样式,特别是相对需要复杂计算的盒阴影,渐变,圆角等样式,最后都需要将这些样式应用到该元素内。从这个角度看,如果对于较为老旧的移动设备进行相对复杂的动画,那么效果肯定不理想。
而通过调用translate,会启动硬件加速,即在GPU层对该元素进行渲染。这样,GPU就会相对解放出来进行其他的计算,GPU对样式的计算相对较快,且保证较大的帧率。我们可以通过2d和3d的transform来启用GPU计算。

居中为什么用transform,而不是margin top/left

我们主要还是从浏览器渲染的性能方面考虑。浏览器渲染过程我们知道,浏览器中有JS引擎和渲染引擎,对于HTML页面的渲染就靠渲染引擎来完成。下面是chrome浏览器页面渲染的整体过程图:
在这里插入图片描述

Chrome渲染主要包括

  • Parse Html----html解析
  • Recalculate Style----查找并计算样式
  • Layout-----排布
  • Paint-----绘制
  • Image Decode----图片解码
  • Image Resize----图片大小绘制
  • Composite Layers----合并图层并输出页面到屏幕

浏览器最终渲染出来的页面,跟Photoshop有点类似,是由多个图层合并而来。

补充transform的原理

transform是通过创建一个RenderLayers合成层,拥有独立的GraphicsLayers。每一个GraphicsLayers都有一个Graphics Context,其对应的RenderLayers会paint进Graphics Context中。合成器(Compositor)最终会负责将由Graphics Context输出的位图合并成最终屏幕展示的图案。满足如下条件的RenderLayers,会被认为是一个独立的合成层:有3D或者perspective transform的CSS属性的层video元素的层canvas元素的层flash对opacity和transform应用了CSS动画的层使用了CSS滤镜(filters)的层有合成层后代的层同合成层重叠,且在该合成层上面(z-index)渲染的层如果RenderLayer是一个合成层,那么它有属于它自己的单独的GraphicsLayer,否则它和它的最近的拥有GraphicsLayer的父layer共用一个GraphicsLayer。由此可见,transform发生在Composite Layer这一步,它所引起的paint也只是发生在单独的GraphicsLayer中,并不会引起整个页面的回流重绘。

层创立的条件如下:
  • 3D 或透视变换 CSS 属性
  • 使用加速视频解码的 元素
  • 拥有 3D (WebGL) 上下文或加速的 2D 上下文的 元素
  • 复合插件(如 Flash)
  • 进行 opacity/transform 动画的元素
  • 拥有加速 CSS filters 的元素
  • 元素有一个包含复合层的后代节点(换句话说,就是一个元素拥有一个子元素,该子元素在自己的层里)
  • 元素有一个 z-index 较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)
GPU

我们经常会听到GPU会加速渲染,那GPU在这里又扮演什么角色呢?前面说到,合成器会负责将层合成绘制为最终的屏幕画面。在硬件加速体系结构,合成由GPU负责。在chrome浏览器多进程模型中,有一个专门的进程来负责传递Render进程的命令,即GPU进程。Render进程和GPU进程是通过共享内存传递的。Render进程可以快速的将命令发给命令缓冲区,并且返回到CPU密集的render活动中,留给GPU进程去处理这些命令。我们可以充分利用多内核机器上的GPU进程和CPU进程。这也是为什么GPU会加速渲染,使transform渲染速度更快的又一原因。4. margin top/leftmarign:外边距,定义元素周围的空间;简言之,可以改变元素的位移。在浏览器页面渲染的时候,margin可以控制元素的位置,也就是说,改变margin,就会改变render tree的结构,必定会引起页面layout回流和repaint重绘。因此,从浏览器性能考虑,transform会比margin更省时间。但是,transform真的处处适用吗?5. transform的局限性上面提到,transform实际上也是用到了GPU加速,也就是说占用了内存。由此可见创建GraphicsLayer,虽然洁身了layout,paint阶段,但Layer创建的越多,占用内存就会越大,而过多的渲染开销会超过性能的改善。因此,当且仅当需要的时候,才会为元素创建渲染层。

对元素进行动画的一些要点:
  • 1,尽量使用keyframes和transform进行动画,这样浏览器会自身分配每帧的长度,并作出优化
  • 2,如果非要使用js来进行动画,使用requestAnimateFrame
  • 3,使用2d transform而不是改变top/left的值,这样会有更短的repaint时间和更圆滑的动画效果
  • 4,移动端的动画效果可能会比pc端的差,因此一定要注意性能优化,尽量减少动画元素的DOM复杂性,待动画结束后异步执行DOM操作

参考:
https://juejin.im/post/5c32b0fb6fb9a049ac7950d9
http://www.cnblogs.com/accordion/p/4593576.html
https://www.zhihu.com/question/33629083
https://blog.csdn.net/qq_33988065/article/details/80371006

发布了46 篇原创文章 · 获赞 20 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览