性能优化是把双刃剑，有好的一面也有坏的一面。
好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用
1. 减少 HTTP 请求
2. 使用 HTTP2
3. 使用服务端渲染
4. 静态资源使用 CDN
5. 将 CSS 放在文件头部，JavaScript 文件放在底部
6. 使用字体图标 iconfont 代替图片图标
7. 善用缓存，不重复加载相同的资源
8. 压缩文件
9. 图片优化
10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码
11. 减少重绘重排
12. 使用事件委托
13. 注意程序的局部性
14. if-else 对比 switch
当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。
16. 避免页面卡顿
17. 不要覆盖原生方法
18. 降低 CSS 选择器的复杂性
19. 使用 flexbox 而不是较早的布局模型
20. 使用 transform 和 opacity 属性更改来实现动画
前端性能优化
原文：https://www.cnblogs.com/KikujiroNoNatsu/p/14301017.html
