关于我很不情愿地帮一个破电脑优化了首屏时间75%这件事
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~
背景
最近我们公司有一个页面，这个页面其实结构很简单，就是三个列表同时出现在某个项目的首页里，大概页面是这样的，差不多每一个列表都有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，因为首屏并不会一股脑加载所有数据，而是逐步加载，这一点看滚动条的变化就知道了~
滚动条一直在变，因为数据在不断逐步渲染
已经尽力了，实在不行这边劝你还是换电脑吧~
优化点
我们在完成一个功能后，可以看出这个功能有什么
- 列表渲染完毕后，可以停止当前帧的计算
- 现在是一帧渲染一条数据，能否控制一帧渲染的多条数据？
来源：juejin.cn/post/7298646156426526754
