居中爲何用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建立的越多，佔用內存就會越大，而過多的渲染開銷會超過性能的改善。

所以，當且僅當須要的時候，纔會爲元素建立渲染層。