前端性能优化-网络篇

2025-02-28

性能优化

111

介绍

前面我们讲了性能优化的综述，这里，我们来讲一下性能优化的网络部分，从一个网络请求的过程开始，详细讲述，从请求流程和减少网络负载的各个方面的核心手段。希望大家对网络优化有一个更立体的认知。

输入URl到请求结束的流程

Untitled diagram-2025-02-27-064849.png

输入URL
URL解析

DNS查询
建立TCP连接
发送HTTP请求
服务器处理请求
服务器返回响应
关闭连接

通过思维导图，再看看其中的详细过程

浏览器输入URL到返回内容的流程.png

下面是 chrome 开发者工具的请求 timeline

根据整个链路，我们总结了两个优化方向，网络链路优化和请求优化

执行优化

网络链路优化

1. DNS 预解析 -- dns-prefetch

通过在页面加载初期就解析可能需要的域名，当实际需要加载这些域名的资源时，DNS 解析已经完成，从而加快资源的加载速度。这个标签对于 CDN 域名等非主域名提前解析 CDN ，有很大的帮助，强烈建议添加。

dns-prefetch 可以通过 <link> 标签在 HTML 中声明，或者通过 HTTP 头部进行配置。

<head>
  <link rel="dns-prefetch" href="https://cdn.webfem.com">
</head>

2. HTTP 预连接 -- preconnect

preconnect 用于提前建立与目标域名的连接，包括 DNS 解析、TCP 握手和 TLS 协商。这比 dns-prefetch 更全面，适用于需要更早建立连接的场景。

使用方法和 dns-prefetch 类似

<head>
  <link rel="preconnect" href="https://cdn.webfem.com" crossorigin>
<head>

3. 内容预加载 -- prefetch

prefetch 是一种资源提示，它告诉浏览器在空闲时间提前下载并缓存将来可能需要的资源。这可以显著减少用户请求这些资源时的等待时间，从而提高用户体验。

使用场景：

当您预测用户可能会导航到另一个页面或执行某个操作时，可以提前预加载该页面或操作所需的资源。
对于单页应用（SPA），预加载用户可能访问的下一个视图或组件可以显著提高性能。

使用方法：

<head>
  <!-- 预加载整个页面 -->
  <link rel="prefetch" href="next-page.html">

  <!-- 预加载特定资源，如图片、脚本或样式表 -->
  <link rel="prefetch" href="image.png" as="image">
  <link rel="prefetch" href="script.js" as="script">
  <link rel="prefetch" href="styles.css" as="style">
</head>

注意事项：

不要过度使用 prefetch，因为它可能会浪费带宽和资源，特别是当预加载的资源最终未被使用时。

4. 优先加载 -- preload

preload 是一种更强大的资源提示，它告诉浏览器立即请求并缓存特定资源，以便在需要时立即使用。与 prefetch 不同，preload 更侧重于当前页面渲染所需的资源，而不是将来可能需要的资源。

使用场景：

当您知道某个资源对当前页面的渲染至关重要，并且希望确保它在需要时立即可用时，可以使用 preload。
对于关键路径上的资源，如关键的 CSS、JavaScript 或字体文件，preload 可以显著提高页面加载性能。

使用方法：

<head>
  <!-- 立即加载 CSS -->
  <link rel="preload" href="styles.css" as="style">
  <link rel="stylesheet" href="styles.css">

  <!-- 立即加载 JavaScript -->
  <link rel="preload" href="main.js" as="script">
  <script src="main.js"></script>

  <!-- 立即加载 -->
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
</head>

注意事项：

preload 的资源会被浏览器优先加载，这可能会影响其他资源的加载顺序和性能。

以上四种优化方式我们同程为 resource hints

Resource Hints 优化3.png

5. 资源缓存

通过http的缓存能力，将资源缓存到浏览器端，可以直接从浏览器拿取内容，不经过服务器，或者经过浏览器，浏览器返回 304，告诉浏览器直接使用缓存，不用下载。

缓存常用的 http header 包括，cach-control 和 expire 。这里内容较多，暂不展开，之后详细介绍

6. 升级 HTTP 协议

HTTP 协议，主要包括HTTP/1.1、HTTP/2和HTTP/3。高版本在性能、安全性和功能上进行了优化和改进。能使用高版本，尽量使用高版本，同时做好兼容性配置。下面是几个版本的核心能力

HTTP 版本号	核心功能
HTTP/1.1	引入持久连接和管道化，提升了连接复用和传输效率，但存在队头阻塞问题
HTTP/2	采用二进制协议和多路复用，消除了队头阻塞，引入头部压缩和服务器推送，显著提升了性能和效率。
HTTP/3	基于QUIC协议，进一步优化了连接建立速度、传输效率和安全性，解决了TCP的一些固有问题，提供了更好的用户体验。

减少网络负载

1. 网络传输协议压缩

1.1 开启 gzip 和 Brotli 压缩

在服务端放置 gzip 压缩后的文件，开启 gzip 之后，可以直接发送 gzip 文件，浏览器端会自动解析 gzip。

Brotli 和 gzip 一样的压缩策略，只不过压缩比更高，后来居上，但是兼容性不好，使用 brotli 需要考虑兼容性

2. 资源内容压缩

2.1 JS 和 CSS 压缩

通过打包工具，将 js 和 CSS 压缩到更小的体积，具体实现可以参考：https://webfem.com/post/webpack-assets-mini

2.2 图片压缩

图片大小优化有两个方向：

通过压缩算法，将图片压缩到更小的体积，常用的网站如：https://tinify.cn/
转换图片格式，获得更小的体积。比如 jpg 转 png，png 转 webp等，webp 有更小的体积，但要考虑兼容性问题。

3. 利用 tree shaking

使用第三方库时，经常会将所有代码引入进来，但是只用到其中的很少的功能。因此，通过打包工具，开启tree shaking，可以有效减少生成代码的体积。

开始tree shaking 的优化，可以参考：https://webfem.com/post/webpack-boundle-optimization

4. 代码拆分

不同页面有不同的功能，代码逻辑不同。因此，在加载首页时，非必要的内容就不要加载，减少首次加载的资源的体积。

总结

通过学习，希望大家对性能优化有个结构化的认识，从点到面，整体考虑。

原文地址：https://webfem.com/post/performance-network，转载请注明出处

« npm install 安装某个指定的版本

前端性能优化-概述（图文详解） »