声明一点，工作环境是Chrome浏览器
1.页面滚动是高频率的动作，在滚动的时候，浏览器是怎么来渲染页面，怎么来查看影响滚动流畅的原因。
2.网络上有很多说影响滚动流畅的原因，google，百度都可以搜到。
下面，先说一下浏览器渲染的分层和分块。
分层，分块是和css相关。
先上两张天猫分层的截图
天猫首页分层截图
在来一张天猫商品列表页面的分层截图
天猫首页分层很少，列表页面除了图片单独处理，基本上也就文档和单独的搜索框分层。
具体网页分层原理可以看这篇文章 Chromium网页渲染机制简要介绍
浏览器渲染对应到滚动性能，需要用performance来分析了。
依旧先来一张图片
滚动到时候，页面主线程的执行顺序如上图Event log，滚动事件，事件内到业务代码，更新层级书，合成新的页面。按照一帧16至17ms的时间算，代表这个时间段需要完成事件执行，图层合并。如果总时间超出，就出现我们长听的掉帧。
上面两张图对比一下，会发现update layer tree和 composite layers的时间变长了，原因是因为第一张图使用的是body滚动没有添加任何样式，第二张添加了overflow:scroll。
另外就是setTimeout等也会占用主线程的时间
