前端性能优化-网络篇

2025-02-28
性能优化
140

介绍

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

输入URl到请求结束的流程

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

  1. 输入URL

  2. URL解析

  1. DNS查询

  2. 建立TCP连接

  3. 发送HTTP请求

  4. 服务器处理请求

  5. 服务器返回响应

  6. 关闭连接

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

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

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

image.png

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

执行优化

网络链路优化

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 图片压缩

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

  1. 通过压缩算法,将图片压缩到更小的体积,常用的网站如:https://tinify.cn/

  2. 转换图片格式,获得更小的体积。比如 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,转载请注明出处