poxiaoxi博客网站打开一个页面时，服务器需要把HTML、CSS、JavaScript、JSON等文件传给浏览器。如果这些文本资源体积较大，直接传输会增加下载时间和带宽消耗，因此Web服务器通常会先进行压缩，再把压缩后的数据发送给浏览器。
网页中常见的HTTP内容压缩方式包括Gzip、Brotli、Deflate和Zstandard。它们解决的是同一个问题：减少网络传输的数据量，但算法、压缩率、计算成本和实际应用范围有所不同。
网页压缩是怎么工作的
浏览器访问网站时，会通过Accept-Encoding告诉服务器自己支持哪些内容编码：
Accept-Encoding: gzip, deflate, br, zstd
服务器根据自身配置选择一种方式，例如返回Brotli：
Content-Encoding: br
整个过程可以理解为：
HTML / CSS / JavaScript ↓ 服务器压缩 ↓ 传输较小的数据 ↓ 浏览器自动解压 ↓ 正常解析和显示页面
用户不需要手动解压，浏览器会自动完成这一过程。
Gzip
Gzip是Web中使用时间较长、兼容性非常成熟的压缩方式，HTTP中的内容编码名称是：
Content-Encoding: gzip
它主要基于DEFLATE压缩算法，适合HTML、CSS、JavaScript、JSON、XML和SVG等文本资源。
Gzip的优势是服务器、CDN和浏览器支持成熟，因此至今仍然是很多网站的基础压缩方案。
Brotli
Brotli是一种无损压缩格式，在HTTP中使用：
Content-Encoding: br
对于HTML、CSS和JavaScript等Web文本资源，Brotli通常能够获得较好的压缩效果，因此现代CDN和Web服务器经常将它作为优先选择。
实际部署中常见的方式是：
浏览器支持 Brotli → 返回 br 否则支持 Gzip → 返回 gzip
因此，Brotli和Gzip通常不是必须二选一，而是可以同时配置。
Deflate
Deflate同样是一种较早出现的HTTP内容编码：
Content-Encoding: deflate
需要注意名称上的区别：DEFLATE本身是一种压缩算法，而HTTP中的deflate内容编码按照规范使用zlib封装的DEFLATE数据。
Gzip内部也使用DEFLATE算法，但增加了不同的封装和校验信息。因此：
DEFLATE → 压缩算法 gzip → 使用DEFLATE算法的一种格式 HTTP deflate → zlib格式封装的DEFLATE数据
在现代网站实际配置中，Gzip和Brotli更常见，通常没有必要为了支持更多算法而强行启用Deflate。
Zstandard
Zstandard简称Zstd，是一种较新的通用无损压缩算法，对应HTTP内容编码：
Content-Encoding: zstd
Zstd的设计目标之一是在压缩率和压缩、解压速度之间取得较好的平衡，目前已经被纳入HTTP内容编码体系。
不过，网站是否应该实际启用Zstd，还需要看浏览器、CDN、Web服务器和当前用户环境的支持情况。对于普通网站，Brotli配合Gzip仍然是更常见的部署方式。
几种算法怎么理解
| 压缩方式 | HTTP标识 | 特点 | Web中常见程度 |
|---|---|---|---|
| Gzip | gzip | 成熟稳定、兼容广泛 | 非常常见 |
| Brotli | br | Web文本压缩效果通常较好 | 非常常见 |
| Deflate | deflate | 较早的HTTP压缩方案 | 相对较少 |
| Zstandard | zstd | 兼顾压缩率与处理速度 | 逐步应用 |
对于普通网站，通常可以简单理解为：
Brotli → 现代浏览器优先使用 Gzip → 作为成熟兼容方案 Deflate → 已较少作为主要选择 Zstd → 新一些的HTTP压缩选择，视环境支持使用
压缩哪些网页资源
HTTP压缩最适合文本类资源，例如：
HTML；
CSS；
JavaScript；
JSON；
XML；
SVG；
纯文本文件。
这些内容通常存在大量重复字符串，因此压缩效果比较明显。
JPEG、WebP、AVIF、MP4、ZIP等文件本身已经采用专门的压缩格式，再进行Gzip或Brotli压缩通常收益很小。
图片压缩是另一回事
网页压缩不能只看Gzip和Brotli，因为页面中经常还有大量图片。
图片使用的是另一类专用压缩方式，例如：
JPEG WebP AVIF PNG
其中JPEG、WebP和AVIF可以针对照片等内容实现较高压缩率，PNG更适合需要无损或透明背景的图片。
所以：
HTML / CSS / JS → Brotli、Gzip等HTTP压缩 图片 → WebP、AVIF、JPEG、PNG等图片编码 视频 → MP4、WebM等视频压缩格式
不同类型资源应该使用适合自己的压缩方式。
Minify也不是压缩算法
前端开发中还经常出现“代码压缩”，例如把CSS：
.article {
color: #333;
margin: 0 0 20px;
}变成：
.article{color:#333;margin:0 0 20px}这叫Minify，主要是删除空格、换行、注释和冗余字符。
它与Brotli、Gzip属于不同层级：
源代码 ↓ Minify 减少文件本身大小 ↓ Brotli / Gzip 减少网络传输体积 ↓ 浏览器
实际网站通常应该同时使用，而不是只做其中一种。
Brotli和Gzip怎么选
对于普通网站，目前比较实用的配置是同时支持Brotli和Gzip。
浏览器支持Brotli时优先返回Brotli，不支持时使用Gzip作为兼容方案。很多CDN、云平台、Nginx和其他Web服务器都可以实现这种自动协商。
配置完成后，可以在浏览器开发者工具的Network中查看响应头：
Content-Encoding: br
或者：
Content-Encoding: gzip
如果HTML、CSS和JavaScript返回了相应的Content-Encoding，说明服务器已经对资源进行了HTTP内容压缩。
网站压缩不只有一种方法
真正的网页体积优化通常由多层组成：
删除不需要的CSS和JavaScript；
对HTML、CSS、JS进行Minify；
服务器使用Brotli或Gzip进行HTTP传输压缩；
图片使用WebP、AVIF等合适格式；
字体优先使用WOFF2并控制字库大小；
配合缓存和按需加载减少重复传输。
因此，“网页压缩算法”如果特指HTTP传输，主要关注Gzip、Brotli、Deflate和Zstd；如果讨论整个页面优化，还需要把代码最小化、图片编码、字体压缩和资源加载策略一起考虑。
对于大多数网站来说，没有必要追求同时开启所有压缩算法。优先做好Brotli与Gzip、代码Minify、图片优化和缓存，通常已经能够覆盖网页压缩中最重要的几个环节。
精彩评论