1. 首页

vueJs 渲染大量数据时应该怎么优化?

优化方案1:

  • 按需加载局部数据, 虚拟列表,无限下拉刷新
  • js运行异步处理: 分割任务,实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
  • 大量纯展示的数据,不需要追踪变化的 用object.freeze冻结(可以使用虚拟列表,Object.freeze冻结对象,Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set,但是缺点是不能响应了)
  • 数据量大的时候,可以做分页处理。翻页一次请求10-20条数据

优化方案2:

  • 如果一次性传入大量数据
  • 建议:
    1. 先打死提供数据的人 ^ v ^~ (推荐)
    2. 如果打不过自己架设中间层
    3. SPA + SSR处理 bigpipe (服务器渲染组件总比浏览器强,毕竟那么多核的CPU也不是花瓶)
    4. 可以考虑stream(我还没看用过…)
    5. 增加加载动画提升用户体验
    6. 同时避免浏览器处理大量的dom(具体看下面)
    7. 尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
  • 如果并非一次性传入大量数据 而只是分段加载 但次数特别多
    1. 异步渲染组件
    2. 使用vue的v-if 最多显示上中(可视区域)下三屏 避免出现大量的dom节点
    3. 或者使用分页(体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”)
    4. 可以参考 https://github.com/dwqs/blog/issues/70

优化方案3 ?:

:point_down:~~~~ 欢迎在下方评论补充你的答案,一起来学习~:pushpin:

扩展阅读:

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:vueJs 渲染大量数据时应该怎么优化?

链接:https://www.javascriptc.com/4357.html

« LeetCode 006. Z 字形变换
Python 生成你的朋友圈九宫格图片»
Flutter 中文教程资源

相关推荐

QR code