谈谈性能优化

86 阅读1分钟

图像层面

1. 图片格式对选择
2. 雪碧图
3. 某些图片可以用css代替

加载层面

1. 预加载
2. 懒加载
3. CDN加载

代码层面

1. 条件控制v-if, v-show
2. 循环语句v-for, key
3. 减少递归
4. 事件的销毁
5. 资源按需引入

构建层面

1. 代码的压缩,合并 (html,css 图片)
2. webpackChunkName+路由的懒加载
3. treeShaking
4. SourceMap
    生产环境:cheap-module-source-map
    开发环境:cheap-module-eval-source-map

渲染层面

1.避免重排重绘
2.页面布局优化
3.适当的使用WebWorker
4.防抖节流
5.降低选择器的复杂程度
6.减少html的层级

缓存层面

1.使用http缓存
2.使用ServiceWorker缓存