前端性能优化

1. 减少 HTTP 请求

   1. 使用防抖、节流

2. 使用 HTTP2

3. 使用服务端渲染

   客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。

   服务端渲染：服务端返回 HTML 文件，客户端只需解析 HTML。

   • 优点：首屏渲染快，SEO 好。
   • 缺点：配置麻烦，增加了服务器的计算压力。、

4. 静态资源使用 CDN

5. 将 CSS 放在文件头部，JavaScript 文件放在底部

6. 使用字体图标 iconfont 代替图片图标、

7. 善用缓存，不重复加载相同的资源

8. 压缩文件

   压缩文件可以减少文件下载时间，让用户体验性更好。

   在 webpack 可以使用如下插件进行压缩：

   • JavaScript：UglifyPlugin
   • CSS ：MiniCssExtractPlugin
   • HTML：HtmlWebpackPlugin

   服务器开启 gzip 压缩。

9. 图片优化

   1. 图片延迟加载（懒加载）
   2. 响应式图片，不同屏幕加载不同大小的图片
   3. 调整图片大小，先展示缩略图，等待用户点击再加载大图
   4. 降低图片质量（压缩图片）
   5. 使用 CSS3 效果代替图片
   6. 使用 webp 格式图片

10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 对比 switch

    当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。

15. 降低 CSS 选择器的复杂性