前端页面性能优化

资源加载优化

• 减小资源包大小
  • 避免公共资源引用，如第三方插件等
  • 引用资源按需加载
    • 静态引用：import.. from ..
    • 动态引用：import()、require()
  • 减少页面中冗余代码
  • 开启GZIP
• 提升传输速度

DOM解析/渲染优化

• 减少DOM树的层级
  • 避免无效代码
  • 避免自定义组件封装超过3层
• 避免DOM不必要更新
  • 不要在watch中直接改变当前的对象/数组
  • 减少computed中关联变量
  • 避免监听频繁变化的变量
• 减少页面首次渲染元素
  • 避免页面中tab标签页中使用同步引用，造成当前页面体积大加载慢
  • Msgbox异步加载 realVisible/v-if

其他优化

• 表格优化
  • 使用AGGrid
  • 表格增删改时避免全局刷新
  • 展示类表格需对数据冻结，object.frezze(data)
  • 使用selfText代替翻译类render
  • 冻结使用noNeedOthercol
• 数据请求优化
  • 优化合并数据请求个数
    • Http1.1请求个数限制
    • 使用GZIP
• js写法优化
  • 临时数据要及时销毁
  • 展示类数据在传入时使用object.frezze(data)
  • 减少对DOM的操作
  • 监听函数要在beforeDestory中销毁