为何Bootstrap 3.3.7请求大小23.6KB，实际磁盘文件为123KB？

哦，这个问题我之前也碰到过！核心原因就是服务器端启用了HTTP压缩，具体来说是Gzip或者Brotli这类高效的文本压缩算法，下面给你详细拆解：

• 压缩的工作流程：
  当你的浏览器向Bootstrap官网请求bootstrap.min.css时，会在请求头里带上Accept-Encoding: gzip, deflate, br，告诉服务器“我支持这些压缩格式”。服务器收到请求后，会把已经预压缩好的（或者实时压缩）bootstrap.min.css文件用对应的算法压缩，再把压缩后的内容发送给浏览器。浏览器拿到压缩包后会自动在本地解压，然后加载使用——所以你在开发者工具里看到的23.6KB是压缩后的传输大小，而保存到本地的123KB是解压后的原始minified文件大小。

• 怎么验证这一点？
  打开Chrome开发者工具的Network面板，找到bootstrap.min.css的请求，查看它的Response Headers：

  • 找Content-Encoding字段，如果值是gzip或者br，就实锤用了对应压缩；
  • 再看Content-Length字段，这个数值就是开发者工具里显示的请求大小（23.6KB左右），而实际文件大小是解压后的真实体积。

• 为什么压缩率这么高？
  CSS本身是纯文本格式，即使已经经过minify（去掉空格、注释、缩短选择器名）处理，依然有很高的压缩空间。Gzip或Brotli这类算法对重复文本的压缩效率极高，像Bootstrap这类通用CSS框架，重复的选择器、属性值非常多，压缩率能达到70%-80%，你这里123KB压缩到23.6KB，刚好符合这个范围。

• 服务器端是怎么配置的？
  主流Web服务器（Nginx、Apache、IIS）都支持开启HTTP压缩：

  • 比如Nginx可以通过添加gzip on;和brotli on;的配置，针对text/css、application/javascript这类文本类型启用压缩；
  • Apache则可以通过mod_deflate或mod_brotli模块来配置。
    很多CDN服务也默认开启了这些压缩，Bootstrap官网应该是用了CDN+服务器压缩的组合，来优化资源加载速度。

内容的提问来源于stack exchange，提问作者wanyin940