总结一下前端性能优化方案。

网络相关优化

• 使用 http2.0
• 减少、合并 HTTP 请求，通过合并 CSS、JS 文件、精灵图等方式减少请求数量。
• 压缩文件， 开启 nginx，Gzip 对静态资源压缩
• 使用 HTTP 缓存，如强缓存、协商缓存
• 使用 CDN，将网站资源分布到各地服务器上，减少访问延迟

HTML&CSS

• 减少 DOM 数量，减轻浏览器渲染计算负担。
• 使用异步和延迟加载 js 文件，避免 js 文件阻塞页面渲染
• 压缩 HTML、CSS 代码体积，删除不要的代码，合并 CSS 文件，减少 HTTP 请求次数和请求大小。
• 减少 CSS 选择器的复杂程度，复杂度越高浏览器解析时间越长。
• 避免使用 CSS 表达式在 javascript 代码中
• 使用 css 渲染合成层如 transform、opacity、will-change 等，提高页面相应速度减少卡顿现象。
• 动画使用 CSS3 过渡，减少动画复杂度，还可以使用硬件加速。

JS

• 减少 DOM 操作数量
• 避免使用 with 语句、eval 函数，避免引擎难以优化。
• 尽量使用原生方法，执行效率高。
• 将 js 文件放到文件页面底部，避免阻塞页面渲染
• 使用事件委托，减少事件绑定次数。
• 合理使用缓存，避免重复请求数据。
• 处理滚动、输入等事件时，适当添加防抖与节流

Vue

• 合理使用 watch 和 computed，数据变化就会执行，避免使用太多，减少不必要的开销
• 合理使用组件，提高代码可维护性的同事也会降低代码组件的耦合性
• 使用路由懒加载，在需要的时候才会进行加载，避免一次性加载太多路由，导致页面阻塞
• 使用 Vuex 缓存数据
• 合理使用 mixins，抽离公共代码封装成模块，避免重复代码。
• 合理使用 v-if 、v-show
• v-for 不要和 v-if 一起使用，v-for 的优先级会比 v-if 高
• v-for 中不要用 index 做 key，要保证 key 的唯一性
• 使用异步组件，避免一次性加载太多组件
• 避免使用 v-html，存在安全问风险和性能问题，可以使用 v-text
• 使用 keep-alive 缓存组件，避免组件重复加载

Webpack 优化

• 代码切割，使用 code splitting 将代码进行分割，避免将所有代码打包到一个文件，减少响应体积。
• 按需加载代码，在使用使用的时候加载代码。
• 压缩代码体积，可以减小代码体积
• 优化静态资源，使用字体图标、雪碧图、webp 格式的图片、svg 图标等
• 使用 Tree Shaking 删除未被引用的代码
• 开启 gzip 压缩
• 静态资源使用 CDN 加载，减少服务器压力