性能优化

性能优化

性能优化最终目的：提升用户体验

项目优化阶段：

开发阶段

生产阶段：不断优化的过程

借助工具测试

npm install -g lighthouse

lighthouse https://www.xuexiluxian.cn/

（https://blog.csdn.net/qq_29187355/article/details/95075979）

1. 首次加载如何提升性能：

　　1.1 减少http请求  

　　　　解决：合并数据 -跟后端沟通

　　1.2 script标签加入顺序

　　　　解决：<script + defer> 或者 放在/body前面

　　1.3 多个小图标使用雪碧图

　　1.4 懒加载

　　1.5 减少重绘和回流

2. 后端给你数据有10万条，你如何优化

　　解决：长列表的方式(页面的条数固定几十条,然后触底再加载更多==>就是长列表) 

3. 项目上线前的性能优化

　　压缩打包html、css、js、

　　图片（base64）等等

4. Vue项目的优化

　　3.1. 路由懒加载

　　3.2. keep-alive缓存组件

　　3.3. 加入:key，而且:key尽量使用id（因为index可能会变）

　　3.4. 静态数据冻结Object.freeze()

　　3.5. 使用第三方ui库，组件按需加载优化

　　3.6. 合适使用v-show和v-if