CSS中的定位

[LiuL0703]

使用top-left-margin 方法 居中 和使用transform的translate方法居中的性能差异

浏览器渲染过程是先解析HTML文件 构建DOM树，创建一个或多个图层独立的绘制，将图作为纹理上传至GPU，复合多个图层来完成最终的图像，所以每个层的样式出现调整后，要重新计算样式，重新布局，使用top-left-margin这种方法只会创建一个图层，而使用translate则容器中的元素不会和自身放在一个图层，而是放在GPU单独的渲染层中，这样带来的好处有三点

1. 该元素任何合成属性(Composite Property)的变化都不会影响原有布局，不会导致原有布局被重(流reflow)，重绘(relayout)
2. 该层将由GPU线程(Compositor Thread)负责渲染，节省CPU资源，不会阻塞主线程JS代码的执行
3. 动画更为平滑，这是因为使用translate将可以以小于像素的单位（sub-pixel）来绘制，并在帧之间加入了blur（模糊）效果

缺点

额外的渲染层导致更多的线程间通信