vue前端性能优化记录

前端性能优化方法记录

 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等格式去优化