可能是最快的前端下拉刷新组件
成楠Peter
字节跳动 前端工程师
关注他
10 人赞同了该文章
最近开源了一个下拉刷新和上拉加载更多的组件，react-fast-scroll，听名字就就知道是基于react的组件，可能是react最快的下拉刷新组件。这个组件也支持Vue，Angular，原生JS等框架，需要扩展。
项目基本完成，现在缺Demo展示，测试用例，这些逐步完善。如果有同学敢兴趣，欢迎 PR 和使用。
https://github.com/carrollcai/react-fast-scrollgithub.com/carrollcai/react-fast-scroll
react-fast-scrollwww.npmjs.com/package/react-fast-scroll
简单分析一下下拉组件
我去年用过 better-scroll，也用过react的虚拟列表 react-virtualized，两者都是非常好的滚动组件，支持的功能也非常多。但是在列表数据较多，或者滑动较快，并没有原生滚动表现好。
better-scroll 使用 transform 模拟滚动行为，但是在滚动的时候会一直触发重排，好像是要获取DOM的一些属性才能计算，而且无法规避，所以大列表的情况下，掉帧比较厉害。
react-virtualized 创建一个固定的滚动区域，只需要可视的数据，减少了组件渲染，重排重绘时间，并且减少了DOM的节点。但是缺点也很明显，滚动稍微快一点就会出现空白。
react-fast-scroll 是基于原生 scroll 事件，并且支持将滚动事件绑定到 window 上，这样可以减少事件捕获和冒泡时间，并且 window 上的滚动事件，浏览器是有优化机制的。原生 scroll 还可以开启 passive: true，避免浏览器监听 scroll 拦截事件（e.preventDefault），也有 10% - 20% 的优化。对于长列表并且有大量图片，可以通过监听 IntersectionObserver api（异步api），当图片离开可视区，移除DOM，这样绘制整个列表的时候，合成的压力会小非常多。对于列表无限增长的问题，可以采用数据切割的方式，数据保留在内存中，DOM移除，比如当加载到1000条数据时，清除前200条数据，滚回去的时候再还原，但是这个过程必须是同步的，否则会因为滚动过快，导致数据未还原，这个理念和 react-virtualized 相似。
下面是 IntersectionObserver 的介绍。
