谦行 阿里云开发者 2024年07月15日 08:31 浙江
阿里妹导读
对电商网页的性能而言，图片优化是至关重要的事情，本文就此探讨了一些简单、可靠的图片优化手段。
一、图片对网页性能优化的重要性
对电商网页的性能而言，图片优化是至关重要的事情，一个典型的电商网页加载的图片无论从数量还是字节数都不容小觑。
而图片优化的思路非常清晰明了，常见的有三个方向：
- 提前首屏图片的加载时机
- 降低加载图片的体积
- 减少加载图片的数量
随着图片压缩技术和浏览器渲染技术的发展，既淘汰了很多过时的图片性能优化技巧，又应运而生了不少简单、可靠的图片优化手段。
二、提前首屏图片的加载时机
一般首屏使用的图片决定了页面的 LCP[1]指标，首屏图片的加载优先级至关重要，而尽可能提前加载图片是图片性能优化的首要问题。
2.1 优化网络建连
在用户首次访问居多的场景，网络建连时间是一个被大部分人忽略，但至关重要的因素，也许我们的性能优化输在了起跑线上，这部分介绍的内容不止对图片加载有效，对于所有静态资源乃至 HTML、异步接口等道理相似。
使用 CDN
CDN 的重要性不用赘述，将内容缓存到离用户更近的边缘服务器上，可以显著提升网络建连效率，当然更重要的是使用 CDN 减少了数据在用户和服务器之间传输的距离，大幅提升资源下载速度。
预连接
HTML 默认支持两种预建连机制：
- dns-prefetch：用来提前解析外部域名的 DNS 查询。当浏览器知道将来可能会从某个特定的外部域名请求资源时，使用 dns-prefetch 可以减少等待 DNS 查询的时间；
- preconnect：不仅会告诉浏览器提前进行 DNS 查询，还会提前建立到资源服务器的 TCP 连接，并在使用 HTTPS 的情况下执行 TLS 握手。这意味着当浏览器实际请求资源时，它已经有了一个开放的连接，可以立即开始数据传输；
收敛域名
在 HTTP/1.1 协议下，由于浏览器通常会对每个域名并行连接数的限制（大部分浏览器限制在6个左右），在多个域名间分散图片曾经是常见的优化手段，以此突破对单一域名的并发限制。然而这也意味着对于每个新的域名，浏览器必须进行额外的 DNS 查找，并且可能需要建立新的TCP连接，这可能会增加一定的延迟。?
HTTP/2 开始支持多路复用，意味着多个请求可以在单个TCP连接上同时进行，减少了对多个域名的需要。因此在 HTTP/2 环境中，收敛图片域名反而可以优化图片加载，因为:
- 减少DNS查询：减少域名数量可以减少DNS查询次数，因为浏览器需要为每个新的域名解析IP地址。
- 减少连接建立：多路复用使得在一个连接上并行发送请求成为可能，因此减少域名可以减少连接建立的次数和相应的延迟。
- 提高TLS效率：对于HTTPS连接，收敛域名意味着可以在较少的TLS握手上复用连接，TLS握手是创建安全连接所必需的步骤，它在总体连接时间中占有显著份额。
- 缓存效率：使用较少的域名可以提高缓存效率，因为浏览器可能会为每个域名分别维护缓存记录。
升级 HTTP/3
HTTP/3 是下一代 HTTP 协议，基于 QUIC（Quick UDP Internet Connections）协议。QUIC 是由 Google 开发并随后由 IETF 标准化的传输层协议。HTTP/3 对网络建连进行了优化，和建连、传输性能相关的主要有
- 减少连接建立时间：HTTP/2 基于 TCP 和 TLS，需要多个往返时间（RTT）来完成握手。HTTP/3 使用 QUIC 协议，它将加密和传输合并为一个过程，允许在一个 RTT 完成连接建立，在最佳情况下甚至可以在零 RTT 中恢复会话。
- 多路复用无阻塞：HTTP/2 虽然支持多路复用，但 TCP 层的队头阻塞问题仍然存在。HTTP/3 通过 QUIC 改进的多路复用能力，在 QUIC 中由于是基于数据报的 UDP，独立的流可以在其他流发生丢包时继续传输，解决了 TCP 的队头阻塞问题。
- 快速丢包恢复和拥塞控制：QUIC 实现了更快速的丢包恢复机制。TCP 需要等待一段时间来确认丢包，而 QUIC 可以利用更精细的确认机制来迅速响应丢包情况，并相应调整拥塞控制策略。
- 连接迁移：QUIC 支持连接迁移，允许客户端在网络环境变化（如从 Wi-Fi 切换到移动网络）时，保持现有的连接状态。在 HTTP/2 这种情况通常会导致连接中断和需要重新建连。
2.2 流式渲染 preload
很多页面为了性能优化引入了 SSR 技术，这样 HTML 请求发起后，页面组建在服务器进行渲染，完成后返回给客户端。如果没有配合流式渲染，会让页面等待服务器取数、渲染出现较长时间的白屏。
流式渲染通过 HTTP 1.1 引入分块传输 Transfer-Encoding: chunked 特性，允许一个 HTTP 的请求的连接中可以多次响应，在 SSR 的场景中，服务端在响应一个 HTML 页面的请求时至少可以拆分成两个分块。
- 头部静态内容：页面 CSS、JavaScript、字体文件等；
- 后续动态渲染内容；
流式渲染优化页面性能
在流式渲染首段返回内容中可以通过 preload 让页面提前加载首屏确定性的图片，提升页面图片加载速度。当然流式渲染不仅仅可以优化图片加载，充分利用服务器计算时间，页面可以对部分域名提前建连、提前加载页面 CSS 和 JavaScript、加载骨骼图，等手段优化页面性能。
如果使用的 CDN 厂商支持边缘计算，可以将页面静态部分换存在 CDN，用户请求时第一时间返回，同时 CDN 向源站请求页面后续动态内容，来进一步提升网页性能。
?前端性能优化：当页面渲染遇上边缘计算-阿里云开发者社区[2]?。
2.3 fetch-priority
在 web 开发中资源的加载顺序对页面的性能有显著影响。浏览器通常会根据资源类型、它们在HTML文档中的位置以及一些内部算法来决定资源加载的优先级。然而浏览器的默认优先级可能并不总是与开发者的意图或页面性能最优化的目标一致。
fetch-priority 特性就是为了解决这个问题而提出的。通过显式地设置资源的fetch-priority 属性，开发者可以指示浏览器按照特定的优先级顺序加载资源。一般情况下图片的加载优先级相对较高，但为了更精准控制，可以使用 fetch-priority 调整。
fetch-priority 属性可以设置不同的优先级值，high、low 和 auto（默认）。可以应用于各种资源，如、、