第 118 题：vue 渲染大量数据时应该怎么优化？

[DreamLee1997]

一、 异步渲染组件：
因为组件渲染太多，影响页面的渲染时间，所有可以延迟组件渲染，可以考虑v-if处理

二、 可以使用虚拟滚动的库：
clusterize.js库； 实现原理；类似虚拟列表

三、虚拟列表
1、定义：虚拟列表是按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。
实现虚拟列表就是在处理用户滚动时，要改变列表在可视区域的渲染部分，其具体步骤如下：

• 计算当前可见区域起始数据的 startIndex
• 计算当前可见区域结束数据的 endIndex
• 计算当前可见区域的数据，并渲染到页面中
• 计算 startIndex 对应的数据在整个列表中的偏移位置 startOffset，并设置到列表上
• 计算 endIndex 对应的数据相对于可滚动区域最底部的偏移位置 endOffset，并设置到列表上

建议参考下图理解一下上面的步骤：

元素 L 代指当前列表中的最后一个元素
从上图可以看出，startOffset 和 endOffset 会撑开容器元素的内容高度，让其可持续的滚动；此外，还能保持滚动条处于一个正确的位置。

2、为什么需要虚拟列表？

• 虚拟列表是对长列表的一种优化方案。在前端开发中，会碰到一些不能使用分页方式来加载列表数据的业务形态，我们称这种列表叫做长列表。比如，在一些外汇交易系统中，前端会准实时的展示用户的持仓情况(收益、亏损、手数等)，此时对于用户的持仓列表一般是不能分页的。
• 在本篇文章中，我们把长列表定义成数据长度大于 999，并且不能使用分页的形式来展示的列表。
• 如果对长列表不作优化，完整地渲染一个长列表，到底需要多长时间呢？接下来会写一个简单的 demo 来测试以下。

3、实现
参考文章
没大看懂

四、分页
有些不适应

五、Object.freeze冻结对象

• 冻结一个对象。一个被冻结的对象再也不能被修改；
• 冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。
• 但是可以调用对象的方法；
• 此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。