页面滚动性能检测

声明一点，工作环境是Chrome浏览器

1.页面滚动是高频率的动作，在滚动的时候，浏览器是怎么来渲染页面，怎么来查看影响滚动流畅的原因。

2.网络上有很多说影响滚动流畅的原因，google，百度都可以搜到。

下面，先说一下浏览器渲染的分层和分块。

分层，分块是和css相关。

    先上两张天猫分层的截图

    天猫首页分层截图

在来一张天猫商品列表页面的分层截图

天猫首页分层很少，列表页面除了图片单独处理，基本上也就文档和单独的搜索框分层。

具体网页分层原理可以看这篇文章 Chromium网页渲染机制简要介绍

浏览器渲染对应到滚动性能，需要用performance来分析了。

依旧先来一张图片

滚动到时候，页面主线程的执行顺序如上图Event log，滚动事件，事件内到业务代码，更新层级书，合成新的页面。按照一帧16至17ms的时间算，代表这个时间段需要完成事件执行，图层合并。如果总时间超出，就出现我们长听的掉帧。

上面两张图对比一下，会发现update layer tree和 composite layers的时间变长了，原因是因为第一张图使用的是body滚动没有添加任何样式，第二张添加了overflow:scroll。

另外就是setTimeout等也会占用主线程的时间