transform导致溢出_使用 transform3D 造成网页闪动的底层原因剖析

今天抽空看了两个，600和601，其中600讲了iOS6带来的新的web inspector，功能的确强大，不光可以调试设备，还可以直接调试模拟器，甚至是app中的uiwebview，一看便知，并无甚复杂之处。

601中干货颇多，尤其是涉及到浏览器底层实现的webkit layer，吸引我反复看了几遍(这个只看静态keynote完全看不懂的)。webkit layer理论完美解释并解决了各种类似transform3D引起的网页闪动的问题。相信这个问题很多移动开发者都碰到过，却无从得知底层原因而不能从根本上解决和避免这一问题。下面以我个人的理解介绍一下视频中的要点：

首先，我们来看视频中的演示代码：

dom结构很简单，但它实际上被渲染成了3个层(webkit layer)：

更加形象的图：

为什么要分层呢？演讲者解释到(个人理解)：webkit并不会真正在3d空间渲染页面。如果有z轴方向上的变动，通过将这些元素绘制到不同的层上，然后直接挪动层，可以更好地利用GPU的计算能力，避免繁重的绘制，提高效率。但并不是所有的元素都会分层，webkit的分层依据为：

即：

1、主页面(body)始终为一个tiled layer

2、与绘图