居中为何用transform，而不是margin top/left

首先。咱们了解下transform是干吗的。

在MDN中的官方解释：CSStransform属性容许你旋转，缩放，倾斜或平移给定元素。这是经过修改CSS视觉格式化模型的坐标空间来实现的。简言之，transform能够操做一些动画、位移效果。

margin top/left，咱们应该很熟悉，用得比较多。

那为何说，居中显示，CSS3标准的transform更胜一筹呢？咱们主要仍是从浏览器渲染的性能方面考虑。

1. 浏览器渲染过程

咱们知道，浏览器中有JS引擎和渲染引擎，对于HTML页面的渲染就靠渲染引擎来完成。下面是chrome浏览器页面渲染的总体过程图：

(www.w3cplus.com/animation/a… © w3cplus.com)

从上面的流程图中不难看出，Chrome渲染主要包括Parse Html、Recalculate Style、Layout、Paint、Image Decode、Image Resize和Composite Layers等。相对应的中文表述就是：html解析、查找并计算样式、排布、绘制、图片解码、图片大小设置、合并图层并输出页面到屏幕。浏览器最终渲染出来的页面，跟Photoshop有点相似，是由多个图层合并而来。

2. 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中，并不会引发整个页面的回流重绘。

3. GPU

咱们常常会听到GPU会加速渲染，那GPU在这里又扮演什么角色呢？

前面说到，合成器会负责将层合成绘制为最终的屏幕画面。在硬件加速体系结构，合成由GPU负责。在chrome浏览器多进程模型中，有一个专门的进程来负责传递Render进程的命令，即GPU进程。Render进程和GPU进程是经过共享内存传递的。

Render进程能够快速 的将命令发给命令缓冲区，而且返回到CPU密集的render活动中，留给GPU进程去处理这些命令。咱们能够充分利用多内核机器上的GPU进程和CPU进程。这也是为何GPU会加速渲染，使transform渲染速度更快的又一缘由。

4. margin top/left

marign：外边距，定义元素周围的空间；简言之，能够改变元素的位移。在浏览器页面渲染的时候，margin能够控制元素的位置，也就是说，改变margin，就会改变render tree的结构，一定会引发页面layout回流和repaint重绘。

所以，从浏览器性能考虑，transform会比margin更省时间。

可是，transform真的到处适用吗？

5. transform的局限性

上面提到，transform实际上也是用到了GPU加速，也就是说占用了内存。因而可知建立GraphicsLayer，虽然洁身了layout，paint阶段，但Layer建立的越多，占用内存就会越大，而过多的渲染开销会超过性能的改善。

所以，当且仅当须要的时候，才会为元素建立渲染层。