前端性能优化方法记录
1. 更改dom树的值,应尽量从里到外的标签修改
2. 新增dom元素,应在最后再一起插入真实dom里面
3. 尽可能使用css去实现效果
4. 避免多个内联样式,尽可能使用一个类去解决,精简多类中的重复样式
5. vue中,尽可能少用组件内样式,提取到一个css文件中,并且css文件越少越好
6. 不需要响应式的数据应使用Object.freeze(),接口返回的值不做改变也可以采用
7. 数据尽可能扁平化,提高计算效率
8. 各种插件能按需加载就按需加载
9. vue中不能冻结的变量又不需要渲染的,可以直接在生命周期create中采用this.xxx的方式定义,使用同data
10. v-if 用于状态改变比较少的情况,v-show用于经常改变的情况,特殊情况例外
11. v-for 的标签加key区分,不要使用下标
12. 组件销毁的时候记得释放定时器,事件监听等
13. 尽可能拆分大组件,尽可能复用组件,尽可能提取公共代码,可以采用minxis等方式提取
14. 前后端开始gzip压缩
15. 简单的组件可以采用render函数的方式去创建,render性能和优先级最高
16. 采用loading,骨架屏的方式减少使用等待的视觉效果
17. 采用ssr等方式使用服务端渲染
18. 组件,路由等采用懒加载方式
19. 函数式组件,即无状态,无法实例化,内部没有任何生命周期处理方法 ,在template 上加 functional
20. 尽可能减少网络请求,轮询可以采用websocket
21. 尽可能采用浏览器的静态缓存
22. keep-alive 缓存
23. 数据量大的可以采用分次,分时,分页等方式去优化算法
24. 确定服务器有网的可以使用cdn链接的方式去引入插件或者图片
25. 类似echarts等组件可以采用减少动画,svg或者canvas等格式去优化