前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
背景
最近我们公司有一个页面，这个页面其实结构很简单，就是三个列表同时出现在某个项目的首页里，大概页面是这样的，差不多每一个列表都有100-1000条数据吧~数据量也不算多，三个列表顶天就3000条数据，并且数据也不复杂，所以也没做什么处理
开发阶段没发现什么问题，但是上了生产后，问题来了，很多"用户"反馈说这个首屏加载超级慢，这个项目是公司内部使用的，"用户"都是公司内部某个部门的员工们，由于他们的公司电脑配置比较差，所以这点数据量就足够他们电脑吃不消了，所以导致了首屏加载会非常慢~~有多慢呢？最慢的居然达到 8s。。。
- Scripting： JavaScript逻辑处理时间
- Rendering： UI渲染时间
有人会问，不应该是数据量多导致渲染慢吗？那为啥主要耗时都在 Scripting 呢？
那是因为 Vue3 在渲染前会进行一系列的 JavaScript 逻辑处理，包括：
- 1、数据创建
- 2、模板解析
- 3、虚拟DOM创建
- 4、虚拟DOM转真实DOM
不过最耗时的肯定就是后两步了，所以需要针对这个问题，做一个解决方案
页面代码先贴一下
懒加载分页？虚拟滚动？不行！
很多人第一想象到的解决方案就是做分页，或者做懒加载，其实分页和懒加载都是一个道理，就是按需去加载数据，但是不好意思，后端接口是老接口并且没有做分页，团队不想要耗费后端精力去重构这个接口，所以这条路就别想啦！！！
又有人说虚拟滚动，我这么说吧，虚拟滚动用在性能好的电脑上效果是很不错的，如果用在性能差的电脑上，那么效果会非常糟糕，毫无疑问虚拟滚动确实会减少首屏加载的时间，但是性能差的电脑滚动快了，会有白屏现象，而且很严重，熟悉虚拟滚动的人都知道，虚拟滚动是根据滚动时间去重新计算渲染区域的，这个计算时需要时间的，但是用户滚动是很快的，性能差的电脑根本计算不过来所以导致会有短暂白屏现象。。
又有人说虚拟滚动 不是可以做预加载吗？可以解决短暂白屏现象。还是那句话，在性能好的电脑上确实可以，但是性能差的电脑上，你预渲染再多也没用，该白屏还是得白屏
分片渲染
不能做分页，不能做懒加载，不能做虚拟滚动，那么咋办呢？我还是选择了分片渲染来进行渲染，也就是在浏览器渲染的每一帧中去不断渲染列表数据，一直到渲染出整个列表数据为止。
这样做就能保证首屏时不会一股脑把整个列表都渲染出来了，而是先进首页后，再慢慢把所有列表都渲染完成
实施
要怎么才能保证在每一个帧中去控制列表渲染呢？可以使用requestAnimationFrame，我们先封装一个useDefer
- frame： 记录当前的帧数
- checkIsRender： 拿列表每一项的索引去跟当前帧数比较，到达了指定索引帧数才渲染这一项
页面里直接使用这个 hooks 即可
这样就能保证了达到一定帧数时，才去渲染一定的列表数据，我们来看看效果，可以看到首屏快了很多，从8s -> 2s，因为首屏并不会一股脑加载所有数据，而是逐步加载，这一点看滚动条的变化就知道了~
滚动条一直在变，因为数据在不断逐步渲染
已经尽力了，实在不行这边劝你还是换电脑吧~
优化点
我们在完成一个功能后，可以看出这个功能有什么
- 列表渲染完毕后，可以停止当前帧的计算
- 现在是一帧渲染一条数据，能否控制一帧渲染的多条数据？
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；
- 一个偏前端的全干工程师；
- 一个不正经的掘金作者；
- 一个逗比的B站up主；
- 一个不帅的小红书博主；
- 一个喜欢打铁的篮球菜鸟；
- 一个喜欢历史的乏味少年；
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点
作者：Sunshine_Lin
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。