Advanced-Frontend/Daily-Interview-Question

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

yygmind opened this issue · 15 comments

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

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

S-mohan commented

虚拟列表？

kungithub commented

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

  • 👍5
fxxqq commented

dwqs/blog#70 虚拟列表

  • 👍4
pangxieju commented

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

FontEndArt commented

如果一次性传入大量数据

建议

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

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

建议

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

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

  • 👍36
  • 😄14
  • 👀8
Loading-m commented

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

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

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

  • 👍1
  • 👎17
supermanklk commented

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

  • 👍1
taosin commented

可以考虑使用 render 函数

  • 👍1
montage-f commented

如果一次性传入大量数据

建议

  • 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控制?

bbrucechen commented

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

  • 👍7
xdevilj136 commented

如果一次性传入大量数据

建议

  • 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的可见性，然后通过变量绑定控制展示

JaykeyGuo commented

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

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

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