scroll、touchmove性能优化技巧

前言

一般我们在监听scroll事件的时候想到的优化都是节流：即一段时间内只执行一次响应逻辑；但是有时候这种优化手段不满足我们的业务需求。比如我们需要实时的知道位置信息，并且做出响应，如果使用节流的话，响应效果就是一卡一卡的效果。

优化原理

最近看了一篇文章 图解浏览器的基本工作原理 ；在渲染流水线过程的合成这个阶段，文中提到了快速滚动区域与非快速滚动区域的区别。当我们监听滚动事件的时候，本来图层对于滚动事件只要合成线程合成新的一帧就行了，现在却要等主线程处理完我们的定义的事件之后才能继续做它的工作。这里的每一帧时间就相当于合成线程与主线程两个线程的工作时间了，增加了输出新帧的时间。

那么有没有优化方法呢？文中提到了使用 passive 改善的滚屏性能 ；顺藤摸瓜，我找到了谷歌测试的一篇文章，尤其是移动端在监听scroll, touchmove的时候利用passive：true进行性能优化效果显著; 前提是你定义的响应事件不要阻止默认事件, 即e.preventDefault()；原理就是合成线程不用再等待主线程的事件处理完了再合成，主线程、合成线程互不干扰，同步进行。那么我前段时间在优化虚拟滚动的时候需要实时拿到e.scrollTop做一些事情，之前发现用手拖动滚动条快速滚动的时候，通过浏览器的调试工具performance录制发现会有长任务的出现阻塞主线程，当时没有很好的解决办法。现在刚好了解这个情况，给它加上这个设置

...

然后发现在快速拖动滚动条的时候的体验确实有所改善。

参考文章：

• 图解浏览器的基本工作原理
• 使用 passive 改善的滚屏性能
• Improving Scroll Performance with Passive Event Listeners