手机腾讯网渲染性能分析

TL; DR

手机腾讯网可以说是渲染性能优化的典范，可以作为所有手机新闻门户首页的模板。

1. 它使用合成图层非常有目的性，一分不多一分不少；
2. 整个合成图层树结构十分合理，并且非常稳定，变化极少；

网页即使在较低端的手机上运行，无论是上下/左右划动，惯性滚动，图片轮播动画等都能够达到让人满意的流畅度。

合成图层分析

上图显示了手机腾讯网的合成图层结构，我们可以很清楚了解生成的合成图层，和使用合成图层的原因:

1. 固定在 Viewport 上的顶栏和右下角的跳转栏；
2. 图片轮播栏位，图片可以被用户拖动或者自动切换，每个图片都是一个合成图层；
3. 图片轮播栏位上的位置示意条，跟随图片切换而发生变化，并跟图片交叠；
4. 图片轮播栏位下方的“今日要闻”，有三栏内容，用户可以左右拖动，每一栏内容刚好生成一个合成图层；

每一个合成图层使用的原因都非常清晰，完全没有滥用，除此以外：

1. 合成图层树的结构扁平，没有过深的嵌套，绝大部分的元素都绘制在 Root Layer 上面；
2. 合成图层树十分稳定，变化极少，只有 Fixed 元素根据需要出现或者隐藏，首先这些变化没有影响到其它的合成图层；其次 Fixed 元素本身是叶子节点，它的出现或者隐藏对整个图层树结构影响很小，而且它们的面积也很小；所以这些变化引起的开销是很小的；
3. 图片轮播和“今日要闻”的三栏图层，不显示的图层都依附在 Viewport 的附近（图片图层以堆叠的方式），浏览器可以对这些图层预先光栅化，并且一直保留相应的缓存，这样在左右滑动的时候，原来不可见的图层进入可见区域时就不需要光栅化了，从而提升了滑动的性能（当然代价是内存占用会多一些）；

通过对手机腾讯网合成图层的分析，我们可以反过来推断出一个渲染性能糟糕的网页应该会有跟手机腾讯网相反的特性：

1. 大量的合成图层，特别是大量小面积的合成图层；
2. 合成图层树嵌套深，结构复杂；
3. 合成图层树变化频繁，而且变动较大，经常会出现某些元素是否生成合成图层的条件在不断变化，某一时刻会生成自己的合成图层，某一时刻又会合并到其它的合成图层上，导致大量重复的光栅化任务；