Web网页滚动性能优化

滚动乍看起来和性能毫无关系。毕竟，你的内容都有了样式，静态资源也已开始加载或已经加载完毕，那我们为什么会突然对滚动感兴趣了呢？原因很简单，一旦开始滚动，浏览器就需要把你的网站或应用绘制到屏幕上。这就意味着，我们可以最小化浏览器的绘制工作，将页面性能最大化。当用户使用你的应用时，拥有平滑滚动经常是被忽视但却是用户体验中至关重要的部分。当滚动表现正常时，用户就会感觉应用十分流畅，令人愉悦，而不是笨重不自然。

滚动的细节

让我们来瞧瞧在滚动时到底发生了什么。在理解这个问题之前，我们先简要的介绍下浏览器是如何向屏幕绘制内容的。这一切都是从 DOM 树(本质上就是页面中的所有元素)开始的。浏览器先检查拥有了样式的 DOM，然后找到那些它认为在滚动时不会改变的元素，然后将这些元素分组并对它们拍照(就是层)。这些层都需要绘制并栅格化为一个纹理，然后混合在一起成为你在屏幕上看到的图像。如果你对 Chrome 的渲染细节感兴趣，不妨看看这篇
总结文章
。当滚动页面时，浏览器很可能需要在这些层（有时称为复合层，即 compositor layers）上绘制一些像素点。通过将内容分组为层后，当某个特定的层内发生改变，我们只需更新该层的纹理，并且只绘制和栅格化渲染层的纹理中被损坏的部分，而不必绘制所有内容。很显然，如果你在滚动过程中移动了某些内容，就像视差网站那样，你就可能损坏一大片区域，很大程度上会涉及多个层，结果就是会造成耗费严重的绘制工作。简而言之，
越少绘制越好
。

诊断你的绘制

理论知识讲了一箩筐，还是看下实际应用吧。这是一个
演示页面
，你可以启动 Chrome 的开发者工具来观察它。如果你打开时间轴面板，设置成 frame 模式，点击记录(record)按钮并开始滚动页面，你将会看到一堆绿柱。在时间轴下的列表中，你会看到全部绘制堆的记录。它们就是 Chrome 在为页面的混合层绘制与栅格化纹理。(在绘制工作结束后，你可能会看到一些复合层的记录，它们就是更新后的层，为显示在屏幕上做好了复合的准备。)