这个问题看起来非常的无厘头，但是考察了候选人的一个知识的储备情况，并且在实际开发的场景中很难遇到。那么这个问题考察了一些什么内容呢？ - 考察前端如何处理大量数据 - 考察候选人对于大量数据的性能优化所以，下面就让我来和大家一起，看看可以使用哪些方法优雅的处理这些数据吧 ## 模拟出十万条数据这里我们可以使用`express`来创建这么一个接口，代码如下 ```js route.get("/bigData", (req, res) => { res.header('Access-Control-Allow-Origin', '*'); // 允许跨域 let arr = [] // 定义数组，存放十万条数据 for (let i = 0; i < 100000; i++) { // 循环添加十万条数据 arr.push({ id: i + 1, name: '名字' + (i + 1), value: i + 1, }) } res.send({ code: 0, msg: '成功', data: arr }) // 将十万条数据返回之 }) ``` ## 通过点击按钮发送请求这个操作就很简单了，给按钮绑定一个点击事件，发送请求就完事了 ```js 点击请求加载

data() { return { arr: [], loading: false, }; }, async onClick() { // 发请求，拿数据，赋值给arr } ``` 好的，现在前置工作已经准备就绪，接下来，就是开始处理这个十万条数据了 ## 方案一：直接渲染当然，这种方法是不取的，因为渲染之后，页面打开就会直接卡死 ```js async onClick() { this.loading = true; const res = await axios.get("http://ashuai.work:10000/bigData"); this.arr = res.data.data; this.loading = false; } ``` ## 方案二：使用定时器分批次的渲染（定时加载，分堆思想）正常来说，十万条数据请求，需要2秒到10秒之间（有可能更长，取决于数据具体内容），而这种方式就是，前端请求到10万条数据以后，先不着急渲染，先将10万条数据分堆分批次。比如一堆存放10条数据，那么十万条数据就有一万堆，然后使用定时器，一次渲染一堆，渲染一万次即可，这样做的话，页面就不会卡死了。 ### 写一个分批分组分堆的函数 ```js function averageFn(arr) { let i = 0; // 1. 从第0个开始截取 let result = []; // 2. 定义结果，结果是二维数组 while (i < arr.length) { // 6. 当索引等于或者大于总长度时，即截取完毕 // 3. 从原始数组的第一项开始遍历 result.push(arr.slice(i, i + 10)); // 4. 在原有十万条数据上，一次截取10个用于分堆 i = i + 10; // 5. 这10条数据截取完，再截取下十条数据，以此类推 } return result; // 7. 最后把结果丢出去即可 } ``` 所谓的分堆思想就是一次截取一段一定长度的数据，比如截取十条数据，就是0-9一段，然后10-19，按这个顺序截取。假设我们的数据为 `[1,2,3,4,5,6,7]`，分堆之后就变成了一个二维的数组，就是 `[ [1,2,3], [4,5,6], [7]]`，然后呢，我们通过创建定时器，来进行一个定时的渲染。 ### 定时渲染 ```js async onClick() { this.loading = true; const res = await axios.get("http://ashuai.work:10000/bigData"); this.loading = false; let twoDArr = averageFn(res.data.data); for (let i = 0; i < twoDArr.length; i++) { // 相当于在很短的时间内创建许多个定时任务去处理 setTimeout(() => { this.arr = [...this.arr, ...twoDArr[i]]; // 赋值渲染 }, 1000 * i); // 17 * i // 注意设定的时间间隔... 17 = 1000 / 60 } }, ``` ## 方案三：使用requestAnimationFrame替代定时器去做渲染关于 `requestAnimationFrame(callback)` 它是 `window` 下面的一个方法，跟`setTimeout`用法类似，接收一个回调函数，该回调函数会在浏览器下一次重绘之前执行。只不过 `requestAnimationFrame` 的刷新时间间隔是根据浏览器自己来定义的，浏览器为了保证流畅性，重绘频率会与系统刷新率保持一致，如果刷新率是60hz，即表示每秒刷新60次，也就是每次重绘的间隔时间大概是`1000ms/60=16.6ms`，`requestAnimationFrame`会跟随浏览器的频率，每16.6ms回调函数就被执行一次，从而避免丢帧卡顿现象。下面看代码 ```js async onClick() { this.loading = true; const res = await axios.get("http://ashuai.work:10000/bigData"); this.loading = false; // 1. 将大数据量分堆 let twoDArr = averageFn(res.data.data); // 2. 定义一个函数，专门用来做赋值渲染（使用二维数组中的每一项） const use2DArrItem = (page) => { // 4. 从第一项，取到最后一项 if (page > twoDArr.length - 1) { console.log("每一项都获取完了"); return; } // 5. 使用请求动画帧的方式 requestAnimationFrame(() => { // 6. 取出一项，就拼接一项（concat也行） this.arr = [...this.arr, ...twoDArr[page]]; // 7. 这一项搞定，继续下一项 page = page + 1; // 8. 直至完毕（递归调用，注意结束条件） use2DArrItem(page); }); }; // 3. 从二维数组中的第一项，第一堆开始获取并渲染（数组的第一项即索引为0） use2DArrItem(0); }, ``` ## 方案四：搭配分页组件，实现前端分页效果这个的话就是，咱们直接调用组件库里面的分页组件，进行一个分页的展示，这里我使用的是`element-ui`组件库，代码如下 ```js ``` ## 方案五：根据滚动触底加载，实现数据渲染这里重点就是我们需要去判断，何时滚动条触底。判断方式主要有两种 - `scrollTop + clientHeight >= innerHeight` - `new MutationObserver()`去观测目前市面上主流的一些插件的原理，大致是这两种，这里可以直接使用 `vue-scroller`,这个插件实现。 ### 在el-table中使用el-table-infinite-scroll指令步骤安装，注意版本号（区分vue2和vue3） **`cnpm install --save el-table-infinite-scroll@1.0.10`** 注册使用指令插件 ```js // 使用无限滚动插件 import elTableInfiniteScroll from 'el-table-infinite-scroll'; Vue.use(elTableInfiniteScroll); ``` 因为是一个自定义指令，所以直接写在`el-table`标签上即可 ```js

async load() { // 触底加载，展示数据... } ``` ## 方案六：使用无限加载/虚拟列表进行展示 ### 什么是虚拟列表所谓的虚拟列表实际上是**前端障眼法**的一种表现形式。看到的好像所有的数据都渲染了，实际上只渲染**可视区域**的部分罢了，有点像我们看电影，我们看的话，是在一块电影屏幕上，一秒一秒的看（不停的放映），但是实际上电影有俩小时，如果把两个小时的电影都铺开的话，那得需要多少块电影屏幕呢？同理，如果10万条数据都渲染，那得需要多少dom节点元素呢？所以我们只给用户看，他**当下能看到的**如果用户要快进或快退（下拉滚动条或者上拉滚动条），再把对应的内容呈现在电影屏幕上（呈现在可视区域内），这样就实现了看着像是所有的dom元素每一条数据都有渲染的障眼法效果了 ### 实现一个简单的虚拟列表 ```html ``` ### 使用vxetable插件实现虚拟列表如果不是列表，是table表格的话，笔者这里推荐一个好用的UI组件，vxetable，看名字就知道做的是表格相关的业务。其中就包括虚拟列表。 `vue2`和`vue3`版本都支持，性能比较好，官方说：**`虚拟滚动（最大可以支撑 5w 列、30w 行）`** 强大！官方网站地址：[vxetable.cn/v3/#/table/…](https://link.juejin.cn?target=https%3A%2F%2Fvxetable.cn%2Fv3%2F%23%2Ftable%2Fscroll%2Fscroll "https://vxetable.cn/v3/#/table/scroll/scroll") ### 安装使用代码注意安装版本，笔者使用的版本如下： `cnpm i xe-utils vxe-table@3.6.11 --save` **main.js** ```js // 使用VXETable import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' Vue.use(VXETable) ``` 具体代码如下： ```html ```