前端页面性能优化
资源加载优化
- 减小资源包大小
- 避免公共资源引用,如第三方插件等
- 引用资源按需加载
- 静态引用:import.. from ..
- 动态引用:import()、require()
- 减少页面中冗余代码
- 开启GZIP
- 提升传输速度
DOM解析/渲染优化
- 减少DOM树的层级
- 避免DOM不必要更新
- 不要在watch中直接改变当前的对象/数组
- 减少computed中关联变量
- 避免监听频繁变化的变量
- 减少页面首次渲染元素
- 避免页面中tab标签页中使用同步引用,造成当前页面体积大加载慢
- Msgbox异步加载 realVisible/v-if
其他优化
- 表格优化
- 使用AGGrid
- 表格增删改时避免全局刷新
- 展示类表格需对数据冻结,object.frezze(data)
- 使用selfText代替翻译类render
- 冻结使用noNeedOthercol
- 数据请求优化
- js写法优化
- 临时数据要及时销毁
- 展示类数据在传入时使用object.frezze(data)
- 减少对DOM的操作
- 监听函数要在beforeDestory中销毁