面试题--如何渲染几万条数据并不卡住界面

Posted 2023-05-06

参考技术A 根据题意，如果我们一次性渲染刷新几万条数据，页面会卡顿，因此只能分批渲染，既然知道原理我们就可以使用setInterval和setTimeout、requestAnimationFrame来实现定时分批渲染，实现每16 ms 刷新一次
requestAnimationFrame跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

当然也可以使用setTimeout来实现：

后端一次性返回10w条数据，该如何渲染

设计不合理

后端返回10w条数据，本身技术方案设计就不合理

主动和面试官沟通此事（这也许是面试官所期待的）

如果面试官非要这么做，那再继续寻找解决方案

浏览器能否处理10W条数据

JS没问题

渲染到 DOM 会非常卡顿

自定义中间层

自定义 nodejs 中间层，获取并拆分这10W条数据

前端对接 nodejs 中间层，而不是服务端

成本比较高

虚拟列表

只渲染可视区域 DOM

其他隐藏区域不显示，只用 <div> 撑起高度

监听容器滚动，随时创建和销毁 DOM

虚拟列表实现起来非常复杂，可借用第三方 lib

vue-virtual-scroll-list

https://www.npmjs.com/package/vue-virtual-scroll-list

react-virtualized

https://www.npmjs.com/package/react-virtualized

1