优化方案1:
- 按需加载局部数据, 虚拟列表,无限下拉刷新
- js运行异步处理: 分割任务,实现时间切片处理, 类似react fiber, 每次执行记录时间, 超过一定执行时间则settimeout或requestAnimation推迟到下一个时间片,一般一个时间片为16ms
- 大量纯展示的数据,不需要追踪变化的 用
object.freeze
冻结(可以使用虚拟列表,Object.freeze
冻结对象,Object.preventExtentsion阻止对象扩展来阻止vue给每个对象加上get,set,但是缺点是不能响应了) - 数据量大的时候,可以做分页处理。翻页一次请求10-20条数据
优化方案2:
- 如果一次性传入大量数据
- 建议:
- 先打死提供数据的人 ^ v ^~ (推荐)
- 如果打不过自己架设中间层
- SPA + SSR处理 bigpipe (服务器渲染组件总比浏览器强,毕竟那么多核的CPU也不是花瓶)
- 可以考虑stream(我还没看用过…)
- 增加加载动画提升用户体验
- 同时避免浏览器处理大量的dom(具体看下面)
- 尽量不要再用vue的双向数据绑定了 或者只用部分页面中处理的数据
- 如果并非一次性传入大量数据 而只是分段加载 但次数特别多
- 异步渲染组件
- 使用vue的v-if 最多显示上中(可视区域)下三屏 避免出现大量的dom节点
- 或者使用分页(体验可能不如上面那么好“无限加载的也要考虑dom过多的情况”)
- 可以参考 浅说虚拟列表的实现原理 · Issue #70 · dwqs/blog · GitHub
优化方案3:
- 在赋值data前把数据冻结即可
this.list = Object.freeze(list)
由于数据被冻结,所以vue无法深度遍历数据给数据添加get和set属性,这样就减少了数据监听带来的问题,而且在大数据量的情况下Object.freeze()非常有用
Object.freeze()方法可以冻结一个对象,一个被冻结的对象再也不能被修改,当然你可以将变量的引用替换掉
不能添加新属性
不能删除已有属性
不能修改已有属性的可枚举性、可配置性、可写性
不能修改已有属性的值
不能修改原型