性能优化之页面加载慢的罪魁祸首！

面试官经常问我们性能优化，但我们每次都是想到什么回答什么，要么回答不到面试官的点上，要么太紧张好多都想不起来，这篇文章我从需要性能优化的根因——页面加载慢来告诉你性能优化应该从哪些方面考虑。

1. 网络问题

网络主要就是三个方面：资源太多、网络带宽延迟高、DNS 解析时间长。

1.1 资源请求过多

• 页面请求的 ​静态资源​（图片、脚本、样式、字体等）过多，导致浏览器发起过多的 HTTP 请求。
• 解决办法：
  • ​资源合并与压缩​：尽可能将多个 JavaScript、CSS 文件合并成一个文件（打包工具自动完成），减少 HTTP 请求次数。
  • ​使用 HTTP/2​：HTTP/2 支持多路复用协议，可以并行传输多个资源，减少请求延迟。
    • HTTP/1.1 中的管道由于队头阻塞问题，我们实际开发中不咋用。
  • ​资源懒加载​：对于滚动加载的资源，使用懒加载技术（如 IntersectionObserver）来延迟加载不在首屏的资源。

1.2 网络带宽受限或延迟高

• 如果服务器和用户之间的网络带宽受限或延迟高，会导致静态资源的加载速度变慢。
• 解决办法：
  • ​CDN 加速​：通过将静态资源托管到 CDN（内容分发网络）上，缩短资源加载的物理距离，降低网络延迟。

1.3 DNS 解析时间长

• 如果 DNS 解析时间较长，也会增加加载时间。
• 解决办法：
  • ​DNS 预解析​：可以使用 <link rel="dns-prefetch" href="https://example.com"> 来提前进行 DNS 解析。
  • ​使用较快的 DNS 服务​：选择更快速的 DNS 解析服务。

2. 浏览器渲染过程

渲染过程这里我们可以思考浏览器渲染原理，其实发现最大的影响是重排重绘，其他的打包器都会解决。

2.1 重排与重绘（Reflow & Repaint）

• 在渲染过程中，修改 DOM 和 CSS 会导致浏览器进行 重排 和 ​重绘​。频繁的重排和重绘会导致页面渲染变慢，特别是在动画、交互较多的页面上。
• 解决办法：
  • ​批量修改 DOM​：避免频繁修改 DOM，尤其是在动画过程中，尽量使用 documentFragment 或通过 requestAnimationFrame 来分批处理。
  • ​使用 transform 和 opacity​：对于动画，避免直接修改 top、left 等属性，而使用 transform 和 opacity，这两者不会触发重排（发生在新的合成层上，不影响页面主图层）。

2.2 阻塞的 JavaScript

• JavaScript 执行过程中可能会阻塞页面的渲染，尤其是当脚本文件体积较大时。
• 解决办法：
  • ​异步加载脚本​：使用 async 或 defer （vite/webpack 打包会自动加上 defer）属性加载外部脚本，使其不会阻塞页面渲染。
  • ​代码分割​：将 JavaScript 分成多个小文件，按需加载，避免一次性加载大量代码。
  • ​懒加载 JavaScript​：使用动态 import() 来按需加载 JS 代码。

2.3 CSS 文件阻塞渲染

• 未压缩的 CSS 文件会增加加载时间，且 CSS 会阻塞渲染，直到 CSS 文件完全加载并解析。
• 解决办法：
  • ​CSS 压缩​：将 CSS 文件进行压缩，减少文件体积。
  • ​异步加载 CSS​：对于非关键 CSS 文件，可以使用 media="print" 或 rel="preload" 等方式异步加载。

3. 前端代码

3.1 JavaScript 体积过大

• JavaScript 代码体积过大，加载和解析需要的时间长。
• 解决办法：
  • ​代码拆分​：通过 Webpack 等工具实现代码分割，按需加载 JavaScript。
  • ​使用 Tree Shaking​：进行 Tree Shaking，去除未使用的代码。
  • ​压缩与混淆代码​：压缩 JavaScript 文件，去除不必要的空格、注释，并进行混淆。

3.2 图片体积过大

• 页面加载时，如果使用的图片体积过大，导致加载时间过长。
• 解决办法：
  • ​图片优化​：使用合适的图片格式（例如 WebP），以及工具压缩图片（如 ImageOptim、TinyPNG）。
  • ​响应式图片​：根据设备的屏幕分辨率和尺寸，选择合适的图片尺寸，避免加载不必要的大图。

4. 服务器端问题

4.1 服务器响应时间慢

• 服务器处理请求的时间过长，导致页面加载变慢。
• 解决办法：
  • ​优化后端逻辑​：查看数据库查询是否存在瓶颈，优化 SQL 查询或缓存查询结果。
  • ​增加服务器性能​：使用负载均衡分担请求压力。
  • ​接口合并​：BFF 合并接口。
  • ​设置合理的缓策略​：合理使用强缓存和协商缓存。

4.2 返回的内容体积过大

• 如果服务器返回的数据体积过大，导致前端解析和渲染速度慢。
• 解决办法：
  • ​压缩响应内容​：启用服务器端的压缩（如 GZIP 或 Brotli），减少数据体积。
  • ​只返回必要数据​：在 API 设计时，确保只返回必要的字段，避免返回多余的无用数据。