Web网页滚动性能优化(2)

Chrome 开发者工具中的绘制记录
紧挨着绘制记录的是绘制的区域，你把鼠标放到上面，Chrome 会高亮页面中重绘的区域。另一种查看重绘区域的方法是在 Chrome 开发者工具的设置页面（点击工具右上角的小齿轮进入）开启 Show paint rectangles。这是用来了解滚动时页面表现的第一个指示器。提示：
你应该尽可能的使绘制区域最小化。
当侧边栏显示时，你会看到绘制的区域就是整个屏幕，导致性能很差。造成这种情况的原因是 Chrome 对受损区域做了并集。本例中，在内容区上方，宽度为 100% 的带状区域进入视野中，而高度为 100% 的侧边栏也被绘制进了同样的复合层内，这些区域合并在一起就成了一个
100% 宽和 100% 高
的区域。如果你用页面上方的复选框来禁用侧边栏，再次滚动你会发现重绘的仅仅是顶部的带状区域，响应速度更快了。如果你想看个真实例子，就打开
Google
，将侧导航栏从
position: fixed
修改为
position: absolute
。当然了，这就改变了网站的行为，但要点在于，你能看到一个通过切换样式来达到性能提升的真实例子。可能当你看到这之后的第一反应就是决定以后再也不用
position:fixed
了，但这与所在环境和需求有关。任何东西都有它适用的地方，重要的是能够测量并理解你的决定所造成的影响。

改变图片尺寸

除了能看到基本的绘制记录，实际上我们还能得到额外的一些信息，特别是和图片相关的。如果你在记录过程中上下调整页面大小，就会看到有些绘制记录允许你打开它来获得更多细节，然后你就应该看到改变图片尺寸的记录。也就是说：浏览器将调整图片尺寸作为渲染工作的一部分。

Chrome 开发者工具中的改变图片尺寸记录
如果你向一个设备发送了大图片，然后用 CSS 或图片的宽高属性使之缩小，那么你就会看到类似上面的记录。需要浏览器重新调整尺寸的图片个数和触发的频率会影响页面的性能，因为它们发生在主浏览器线程，会阻碍其他操作。当然了，不改变图片尺寸的例子也有很多，但是在某些情况下是无法避免缩放操作的，尤其是在移动端，用户只要用双指捏拉就可以实现缩放。这些时候你是没有什么办法的，但知道它会发生总归是好事。不过话又说回来，浏览器的性能始终在提升，尤其是渲染这个热门话题，因此你可以寄希望于技术提升所带来的性能优化。除了上面提到的内容，以下这些也会影响到滚动性能：