本文已参与「新人创作礼」活动，一起开启掘金创作之路。
书接上文，本节主要介绍在CDNs上针对各种性能要素可进行的性能优化方式。
性能要素 Performance features
主要内容：数据压缩(Gzip, Brotli)、TLS 1.3 、HTTP/2 和 HTTP/3 、图像优化、Minification (Terser)
图像优化
CDN 图像优化服务通常专注于可以自动应用的图像优化，以减少图像传输大小。
例如：剥离EXIF数据、应用无损压缩 以及将图像转换为更新的文件格式（如WebP）。图像占中间网页传输字节的约50%，因此优化图像可以显着减小页面大小。
Minification
- CLI工具：
Terser - Webpack插件：
TerserWebpackPlugin
Minification从 JavaScript、CSS 和 HTML 中删除不必要的字符。最好在源服务器而不是 CDN 上进行压缩。
站点所有者对要压缩的代码有更多的上下文，因此通常可以使用比 CDN 使用的技术更积极的压缩技术。
但是，如果不能选择在源代代码Minification，那么 CDN 的Minification也是一个不错的选择。
数据压缩
- Node中间件：
compression,shrink-ray - Webpack插件：
CompressionPlugin,BrotliWebpackPlugin - 所有基于文本的响应都应该用gzip或Brotli进行压缩。如果可选，请选Brotli。
- Brotli是一种较新的压缩算法，与gzip相比，它可以实现更高的压缩率。
- 如果一个原点不支持Brotli，可以使用gzip-6来压缩动态资源；gzip-9可以用来压缩静态资源。
HTTP/2 和 HTTP/3
HTTP/2 提供了优于 HTTP/1 的多项性能优势，并得到所有主要浏览器的支持。HTTP/2的性能特点包括：
- 多路复用 (Multiplexing)
- 流优先级 (Stream Prioritization)
- 服务器推送
- 首部压缩
多路复用支持多个并发流；流优先级提供了一个接口，用于传达每个流的相对优先级。这有助于服务器首先发送最重要的资源(即使它们没有先被请求)。
Reference: hpbn.co/http2/
性能 是 HTTP/3 相对于 HTTP/2 的主要优势。具体来说，HTTP/3 消除了连接级别的队头阻塞并减少了连接建立时间。HTTP/2 引入多路复用，允许使用单个连接同时传输多个数据流。但是对于 HTTP/2，单个丢弃的数据包会阻塞连接上的所有流（这种现象称为队头阻塞）。
使用 HTTP/3，丢弃的数据包只会阻塞单个流。这种改进主要是 HTTP/3 使用UDP（HTTP/3 通过QUIC使用 UDP ）而不是TCP 的结果。这使得 HTTP/3 对于通过拥塞或有损网络传输数据特别有用。
此外，HTTP/3 使用 TLS 1.3，因此共享TLS性能优势：建立新连接只需要一次往返，恢复现有连接不需要任何往返。
TLS 1.3
TLS 的1.3 版本将 TLS 握手从两次往返缩短为一次。对于使用 HTTP/1 或 HTTP/2 的连接，将 TLS 握手缩短为一次往返可有效减少 33% 的连接建立时间。
结论
- 使用CDN： CDN快速交付资源，减少源站负载，有助于应对流量高峰。
- 尽可能主动缓存内容：静态和动态内容都可以而且应该缓存 - 尽管持续时间不同。定期审核您的网站 以确保您以最佳方式缓存内容。
- 启用 CDN 性能特性： Brotli、TLS 1.3、HTTP/2 和 HTTP/3 等特性进一步提高了性能。
Reference： web.dev/content-del…
