背景 自我介绍下，四年工作经验，头两年全栈开发，后两年专职做前端，目前已达到高级前端工程师水平，经历过三家公司。第一家公司，电商行业，做阿里 ISV 供应商，为淘宝卖家服务，也是我第一次接触百万 UV

在工作中，有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况，对于此，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。 在高性能渲染十万条数据(时间分片)一文中，提到了可…

虚拟列表即只渲染可视区域的数据，使得在列表数据庞大的情况下，只显示可视区域的数据，顶部和底部不可见的区域以一个空的dom来代替（留白），这样就能大量减少dom的渲染量，使得列表能够流畅地无限滚动，这在移动端是十分重要的。 实现虚拟列表的方案主要是计算出可视区域要显示哪些数据，然…

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作 该图中的两个帧，在每一帧内部，TASK和redering只花费了一部分时间，并没有占据整个帧，那么这个时候，如图中idle pe…

在APP使用hybrid架构后，APP内页面绝大部分都由原生转为h5实现。在处理APP内长列表（如评论列表等）时，若元素数量过多，DOM节点也会随之增加，降低整个页面的性能，所以就有了这个虚拟滚动轮子的应用场景（基于Vue）。 这个轮子考虑的情况十分周全，给出了列表项高度已知且…

相信大家都遇到过渲染一个很长的列表或者页面带来的痛苦，长列表与页面可能对首屏渲染速度造成很大的影响，并且会对页面的滚动造成一些不流畅的体验。 我也在最近遇到了这个问题，发现除了直接使用分页外，虚拟滚动这种解决方案很是流行，于是也重新造了一下vue中虚拟滚动的轮子。虚拟滚动简单的…