前端性能优化（重点）

前端性能优化可以分为三个level：静态资源优化、接口访问优化、页面渲染速度优化

一.静态资源优化

减少静态资源的加载时间，主要包括html、css、js和图片文件，静态资源的加载时间是前端性能最大的瓶颈（特别是图片）

1. 合并css、js文件，制作雪碧图：减少http的请求次数，节省网络请求时间
2. 静态资源cdn分发：客户端可以通过最佳的网络链路加载静态资源
3. js、css文件压缩，图片压缩，gzip压缩：减少请求返回的数据量
4. 静态资源缓存机制
5. 使用字体图标 iconfont 代替图片图标

二.接口访问优化

1. 减少HTTP请求，压缩精简脚本代码
2. 一个页面依赖的众多业务接口和第三方接口统一使用一个部署在集群中的接口调用，减少页面接口请求数
3. 接口缓存策略优化

三.页面渲染速度优化

1. 合理放置脚本位置 css放在顶部：优先渲染，js放在底部：避免阻塞
2. 减少DOM元素数量：这个最能体现变成水平了
3. 图片懒加载:避免页面打开时加载过多的资源
4. 使用事件委托:能大大的减少与dom的交互次数，提高性能
5. 减少重绘重排
   用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。
   如果要对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。推荐使用隐藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个方案
   img标签要设置高宽
6. 无阻塞加载JavaScript脚本(异步加载) ：动态脚本加载 defer async
   defer是在html解析完毕才执行,如果有多个则按加载顺序执行
   async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关
7. 使用服务端渲染

三.Vue项目优化

1.路由懒加载
2.一些数据的包装用下computed
3.for循环设置key值
4.代码模块化，提取公用的方法
4.业务功能组件的封装
5.第三方插件的按需引入
6.webpack的压缩