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

Question

众所周知 HTML 页面中 DOM 的修改会引起页面的重新渲染，重新渲染包含 DOM 节点的重排和重绘（重排和重绘的知识点可以自行百度），如果页面中大量的 DOM 节点发生重绘，页面就会出现性能问题。

Answer 1

如果一次性传入大量数据

建议

• 1.先打死提供数据的人 ^ v ^~ （推荐）
• 2.如果打不过自己架设中间层
• 3.SPA + SSR处理 bigpipe （服务器渲染组件总比浏览器强，毕竟那么多核的CPU也不是花瓶）
• 4.可以考虑stream（我还没看用过...）
• 4.增加加载动画提升用户体验
• 5.同时避免浏览器处理大量的dom（具体看下面）
• 6.尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据

如果并非一次性传入大量数据 而只是分段加载 但次数特别多

建议

• 1.异步渲染组件
• 2.使用vue的v-if 最多显示上中（可视区域）下三屏 避免出现大量的dom节点
• 3.或者使用分页（体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”）

个人建议，如有误，还劳烦指正

前端菜鸟想问下, 如何通过vue的v-if来进行上中下的三屏dom控制?

Answer 2

总结了一下
1.添加加载动画，优化用户体验
2.利用服务器渲染SSR，在服务端渲染组件
3.避免浏览器处理大量的dom，比如懒加载，异步渲染组件，使用分页
4.对于固定的非响应式的数据，使用Object.freeze冻结

Answer 3

如果一次性传入大量数据

建议

• 1.先打死提供数据的人 ^ v ^~ （推荐）
• 2.如果打不过自己架设中间层
• 3.SPA + SSR处理 bigpipe （服务器渲染组件总比浏览器强，毕竟那么多核的CPU也不是花瓶）
• 4.可以考虑stream（我还没看用过...）
• 4.增加加载动画提升用户体验
• 5.同时避免浏览器处理大量的dom（具体看下面）
• 6.尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据

如果并非一次性传入大量数据 而只是分段加载 但次数特别多

建议

• 1.异步渲染组件
• 2.使用vue的v-if 最多显示上中（可视区域）下三屏 避免出现大量的dom节点
• 3.或者使用分页（体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”）

个人建议，如有误，还劳烦指正

前端菜鸟想问下, 如何通过vue的v-if来进行上中下的三屏dom控制?

可以用IntersectionObserver或offsettop值判断dom的可见性，然后通过变量绑定控制展示

Answer 4

两个关键词：大量数据、渲染
那这里就需要讨论这个数据是全部都在一屏中渲染，还是有交互之后的更新，例如虚拟列表和懒加载。

如果只是对大量数据的处理，就是CPU密集型的计算的问题，这个部分可以通过引入缓存和多线程的方式来处理。
通过localStorage或者IndexDB来暂存数据在前端，然后通过web worker来多线程处理数据，包括虚拟DOM的diff。

渲染部分的核心想法是“双缓存”，也就是使用虚拟DOM，只是这个时候需要对数据做统一的处理，缓冲，在统一变更数据之后在生成对应的虚拟DOM树，来进行渲染的操作

Answer 5

可以考虑使用 render 函数

Answer 6

1.建议先从来源地方优化,SQL语句,是否SELECT使用了*, 这个真的很影响速度, 是否建立了索引.
2.然后从传输层来说,提升服务器的上传速率
3.从前端来看,要求分页处理
4.从产品角度来看,优化加载的设计

Answer 7

1.这主要是接口慢，后端优化的事。
2.加个loading。。。
3.数据量大vue已经处理的很好了，我能怎么优化，无非就是用户体验。
4.减少dom结构，减少重构？避免回流啥的，就是减少重绘的时间。

Answer 8

1. 按需加载局部数据, 虚拟列表，无限下拉刷新
2. js运行异步处理:
   分割任务，实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
3. 大量纯展示的数据,不需要追踪变化的 用object.freeze冻结

Answer 9

可以使用虚拟列表，Object.freeze冻结对象，Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set，但是缺点是不能响应了

Answer 10

如果一次性传入大量数据

建议

• 1.先打死提供数据的人 ^ v ^~ （推荐）
• 2.如果打不过自己架设中间层
• 3.SPA + SSR处理 bigpipe （服务器渲染组件总比浏览器强，毕竟那么多核的CPU也不是花瓶）
• 4.可以考虑stream（我还没看用过...）
• 4.增加加载动画提升用户体验
• 5.同时避免浏览器处理大量的dom（具体看下面）
• 6.尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据

如果并非一次性传入大量数据 而只是分段加载 但次数特别多

建议

• 1.异步渲染组件
• 2.使用vue的v-if 最多显示上中（可视区域）下三屏 避免出现大量的dom节点
• 3.或者使用分页（体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”）

个人建议，如有误，还劳烦指正

Answer 11

优化我觉得分要分两点：
1、加载显示优化，能快速加载显示；
2、内存占用优化。

Answer 12

dwqs/blog#70 虚拟列表

Answer 13

Object.freeze 冻结对象，不让vue劫持

Answer 14

虚拟列表？

Answer 15

数据量大的时候，可以做分页处理。翻页一次请求10-20条数据