圆弧派博客 - 专注于网络技术 - CSS

Gzip与Brotli压缩配置指南

2026-04-29T16:59:00+08:00

在现代 Web 性能优化中，传输体积往往是页面加载速度的第一杀手。一个未经压缩的 JavaScript 文件可能高达几百 KB，而启用压缩后传输量能直接下降 70% 以上，这对带宽和首屏时间的影响是立竿见影的。今天我们就来系统梳理一下目前使用最广泛的两种 HTTP 压缩方案——Gzip 与 Brotli，从原理、配置到调优，帮你一次性搞懂它们的区别与最佳实践。一、为什么我们需要压缩？HTTP 压缩的本质，是在服务器端对响应体进行编码，浏览器收到后再解码，从而在网络中传输更少的数据。代价是消耗少量 CPU 做压缩/解压，但在带宽成本远高于 CPU 成本的今天，这笔交易非常划算。一个典型的 HTML 文件经 Gzip 压缩后可缩减至原大小的 20%-30%；而 Brotli 还能在此基础上再压缩 15%-25%。这不仅能提升首次内容绘制（FCP），还能直接降低 CDN 流量费用。二、Gzip：老将不老2.1 背景与原理Gzip 诞生于 1992 年，基于 DEFLATE 算法（LZ77 + Huffman 编码）。它通过寻找重复字符串（LZ77 滑动窗口）并构建哈夫曼树来压缩文本，几乎所有现代浏览器和服务器都支持，兼容性无与伦比。2.2 Nginx 配置 Gzip在 Nginx 中开启 Gzip 非常简单，通常只需在 http、server 或 location 块中加入：gzip on; gzip_comp_level 6; # 压缩级别 1-9，5-6 是性价比之选 gzip_min_length 256; # 小于此字节不压缩，避免负优化 gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_vary on; # 响应头添加 Vary: Accept-Encoding，方便代理缓存 gzip_proxied any; # 对所有代理请求启用压缩 gzip_disable "msie6"; # 禁用对 IE6 的压缩（可省略）重启 Nginx 后，检查响应头是否出现 Content-Encoding: gzip 即可。2.3 Apache 与 Node.jsApache：启用 mod_deflate，使用 AddOutputFilterByType DEFLATE 指令配置 MIME 类型。Node.js (Express)：使用中间件 compression，默认使用 Gzip，可根据 Accept-Encoding 自动协商。Gzip 的优势在于成熟、CPU 消耗低、兼容性完美，几乎是最低配置成本的基础优化。三、Brotli：新一代压缩利器3.1 Google 出品，压缩率更优Brotli 是 Google 在 2015 年推出的压缩算法，最初用于 WOFF2 字体格式。它结合了 LZ77、Huffman 编码以及一个静态预定义字典——这个字典包含了大量 Web 文本（HTML、CSS、JS）中常见的字符串片段，因此在压缩这类内容时具有天然优势。此外，Brotli 支持更大的滑动窗口（最大 16MB），可以找到更远的重复数据。相比 Gzip，Brotli 的压缩率通常高出 15-25%，但压缩速度较慢（尤其在高等级），解压速度则与 Gzip 相近，完全适合一次压缩、多次解压的场景（如静态资源）。3.2 浏览器支持所有现代浏览器（Chrome、Firefox、Safari、Edge）均通过 Accept-Encoding: br 宣告支持 Brotli。国内除部分老旧浏览器外，覆盖已不成问题。可以放心将其作为优先压缩方案。3.3 Nginx 安装与配置 BrotliNginx 官方并未内置 Brotli，需要额外编译模块 ngx_brotli。以从源码编译为例：# 下载 Nginx 源码与 brotli 模块 git clone https://github.com/google/ngx_brotli.git cd ngx_brotli && git submodule update --init # 编译 Nginx 时加入 --add-module=../ngx_brotli ./configure --add-module=/path/to/ngx_brotli ... make && make install安装后即可在配置中使用：brotli on; brotli_comp_level 6; # 压缩级别 0-11，推荐 5-6 brotli_static on; # 启用预压缩文件检查 (.br) brotli_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript; brotli_min_length 256;brotli_static on 非常实用：如果服务器上同时存在 style.css 和 style.css.br，Nginx 会直接返回预压缩的 .br 文件，避免每次压缩的开销，适合构建流程中提前压缩静态资源。3.4 Apache 与 CDNApache 可通过 mod_brotli 模块启用，配置类同。各大 CDN（阿里云、Cloudflare 等）均默认支持 Brotli 无损压缩，仅需勾选启用。四、Gzip vs Brotli：核心对比维度GzipBrotli压缩率中等高 15-25%压缩速度快较慢（尤其是 level > 6）解压速度快接近 GzipCPU 消耗低较高浏览器兼容所有现代浏览器静态预压缩.gz.br适合场景动态内容、API 响应静态资源、文本类文件要点：Brotli 不是 Gzip 的替代品，而是“增强补丁”。我们应该同时启用两者，让浏览器通过 Accept-Encoding 自动协商最优格式。五、最佳实践与调优建议5.1 双启用，协商优先Nginx 可这样配置以同时支持 Gzip 和 Brotli：# 同时开启 gzip on; brotli on; # Brotli 优先级高于 Gzip，浏览器会优先请求 br # 由 Accept-Encoding 头自动决定，无需额外操作当客户端发来 Accept-Encoding: br, gzip 时，Nginx 会优先使用 Brotli 压缩（若满足规则）。对于不支持 br 的旧浏览器，则降级为 Gzip。5.2 哪些内容应该压缩？文本类型：text/html、text/css、text/javascript、application/json、application/xml、image/svg+xml。JavaScript/CSS 文件：未压缩的 application/javascript、text/css。字体文件：WOFF（已压缩）不用压缩，但 font/ttf、font/otf 可酌情压缩。不压缩的类型包括：图片（image/*）、视频、音频、已压缩格式（如 .zip、.woff2、.wasm）。否则徒增 CPU 且可能越压越大。5.3 压缩级别选择Gzip：comp_level 5-6 为甜点区间，再高收益递减。若 CPU 资源充裕且流量巨大，可升至 9 换取微小体积优势。Brotli：comp_level 5-6 同样是最佳性价比。静态资源可在构建期使用最高级别 11 生成 .br 文件（如 webpack 插件 brotli-webpack-plugin），线上即可用 brotli_static on 直接分发，兼顾极致压缩率与零 CPU 开销。5.4 利用缓存与 Conditional Requests启用压缩后，不要忘记配合 ETag/Last-Modified，并设置合理的 Cache-Control。对于预压缩文件，如果更新了原文件，记得同步更新 .br 和 .gz，否则缓存会出问题。5.5 安全：BREACH 攻击Brotli 与 Gzip 都可能面临 BREACH（破解 HTTPS 响应体中的秘密）攻击。若你的站点涉及高度敏感数据（如 CSRF token），需要随机化响应长度或使用防 BREACH 的补丁。大多数普通业务场景下，此项风险较低。5.6 CDN 层面的配置如果你使用 CDN，强烈建议在源站先配置好压缩，并在 CDN 侧开启“跟随源站”或“智能压缩”功能。有些 CDN 支持边缘压缩（CDN 自己压缩），可减轻源站压力。六、总结与展望Gzip 是旧时代的守护神，Brotli 是新世代的进攻者。对开发而言，最佳策略就是两者全开，优先 Brotli，并为静态资源准备 .br 预压缩文件。整套配置成本极低，却能稳定带来 15-30% 的传输缩减，是性价比最高的 Web 性能优化项之一。未来，Zstandard（zstd）算法已经在 HTTP 内容编码规范中被讨论，它拥有更快的压缩/解压速度和接近 Brotli 的压缩率，可能会成为下一代标准。但现在，做好 Gzip + Brotli 的兜底配合，你的 Web 应用已经站在了网络传输优化的第一梯队。博主提示：每次更换服务器或更新静态资源后，记得用 curl -I -H "Accept-Encoding: br" https://yoursite.com/main.js 验证是否正确返回 Content-Encoding: br，这是最简单有效的诊断方式。压缩即正义，让你的字节飞一会儿！

魔幻粒子新年快乐祝福源码

2025-01-27T13:23:00+08:00

效果图源码介绍魔幻粒子新年祝福是一段基于HTML5 Canvas制作的粒子爆炸，矩阵显字的动画特效代码，给人一种非常大气的视觉感，欢迎对此段代码感兴趣的朋友前来下载使用。源码由HTML+CSS+JS组成，记事本打开源码文件可以进行内容文字之类的修改下载地址{cloud title="魔幻粒子新年祝福源码" type="default" url="https://pan.quark.cn/s/3323cd0b8b51" password=""/}

Joe文章列表添加渐变颜色效果

2024-07-07T00:41:00+08:00

一个大气的文章列表CSS渐变动画，也可以使用图片作为渐变背景，，效果如下(鼠标移动到元素上后颜色会更加突出)：日间模式夜间模式接下来需要编辑的文件以及相对Joe主题的文件路径：joe.index.js /Joe/assets/jsjoe.index.css /Joe/assets/cssjoe.mode.css/Joe/assets/css开始（共三部分）{tabs}{tabs-pane label="添加HTML代码"}打开joe.index.js文件找到如图所示位置可以直接搜joe_list__item wow default定位到，其实一打开就是了。在第一个a标签元素后面加入如下代码

{/tabs-pane}{tabs-pane label="添加CSS代码"}直接将下面的css代码复制粘贴到joe.index.css文件的最后面就行了/*首页列表渐变*/ .article-banner-wrap { position: absolute; height: 100%; width: 50%; right: 0; top: 0; } .article-banner { visibility: hidden; opacity: .2; position: absolute; height: 100%; width: 50%; right: 0; top: 0; z-index: 0; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center center; transition: opacity 0.2s; -webkit-mask-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 8px; background:linear-gradient(to left,#2BC0E4,#EAECC6); visibility: visible; animation: banner-show 1s; } .joe_list__item.default:hover .article-banner{opacity: 1;}其中的background可以改成图片地址，这样效果就是图片了，但图片会拖累网站加载速度，可自行决定是否要换成图片。{/tabs-pane}{tabs-pane label="适配夜间模式"}打开joe.mode.css文件，将以下CSS代码加入文件底部即可。/*首页列表图片渐变夜间模式*/ html[data-night='night'] .article-banner{ background: linear-gradient(to left,#1F1C2C,#928DAB); opacity:0.1 }我这里不是最底部是因为我后来又加其他东西了，其实也不是一定要最底部，只是方便小白操作和自己描述了。{/tabs-pane}{/tabs}

给博客评论框添加一个简单的滑动背景图

2024-03-18T18:06:00+08:00

纯css实现，代码各个主题都是通用的，这里以Joe主题为例效果：css代码：.joe_comment__respond-form .body{padding:15px;background:url(https://www.iarc.top/usr/uploads/2024/03/1257364055.png);background-position:right;background-repeat:no-repeat;resize:none;}.joe_comment__respond-form .body:hover{background-position-x:4000px;transition:ease-in-out 2s;}.joe_comment__respond-form .body 就是评论框主题，可以直接在前端按F12查看自己主题的是哪个组图片：最好自己保存下来，以防失效。

萤火虫氛围效果(纯CSS)

2024-02-15T00:21:00+08:00

.circle-container {position: fixed;top: 0;left: 0;z-index: 1} var firefly = ""; for (var i = 1; i

为自己博客or网页加上鼠标流光背景JS特效

2023-07-02T16:06:00+08:00

鼠标流光背景特效（乱起的名别太在意 :@(献花) ），canvas画布配合JS即可实现，这个版本是我从一个人单页里面抄下来的，顺便优化了一下后将其加入到了本站夜间模式{card-default label="快速实现" width=""}

{/card-default}将特效设为博客夜间模式1.先在body写入

2.更改css属性display为none（日间模式不显示该元素）.sbcanvas{ display: none; position: fixed; top: 0; z-index: -9; } 3.在joe.mode.css文件夹最下面加入以下代码html[data-night='night'] .sbcanvas{display:block;}完成以上操作即可大功告成，快去开启夜间模式试一下吧

为网站添加个新年灯笼提前增点喜庆

2022-12-23T22:14:00+08:00

效果图（与本篇文章上面一致）代码：将下面代码加在head标签或者body中即可年新乐快 .deng-box { position: fixed; top: -40px; right: 150px; z-index: 9999; pointer-events: none; } .deng-box1 { position: fixed; top: -30px; right: 10px; z-index: 9999; pointer-events: none } .deng-box2 { position: fixed; top: -40px; left: 150px; z-index: 9999; pointer-events: none } .deng-box3 { position: fixed; top: -30px; left: 10px; z-index: 9999; pointer-events: none } .deng-box1 .deng, .deng-box3 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px #fc903d } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; background: rgba(216, 0, 15, .8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px #fa6c00 } .deng-a { width: 100px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .deng-b { width: 45px; height: 90px; background: #d8000f; background: rgba(216, 0, 15, .1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03 } .xian { position: absolute; top: -20px; left: 60px; width: 2px; height: 20px; background: #dc8f03 } .shui-a { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; -webkit-animation: swing 4s infinite ease-in-out; -webkit-transform-origin: 50% -45px; background: orange; border-radius: 0 0 5px 5px } .shui-b { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50% } .shui-c { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: orange; border-radius: 0 0 0 5px } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: " "; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: " "; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: orange; background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03) } .deng-t { font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif; font-size: 3.2rem; color: #dc8f03; font-weight: 700; line-height: 85px; text-align: center } .night .deng-box, .night .deng-box1, .night .deng-t { background: 0 0 !important } @-moz-keyframes swing { 0% { -moz-transform: rotate(-10deg) } 50% { -moz-transform: rotate(10deg) } 100% { -moz-transform: rotate(-10deg) } } @-webkit-keyframes swing { 0% { -webkit-transform: rotate(-10deg) } 50% { -webkit-transform: rotate(10deg) } 100% { -webkit-transform: rotate(-10deg) } }

年

新

乐

快

给网站logo添加一个扫光CSS特效

2022-12-23T17:03:00+08:00

具体扫光演示:本博客logo方法开始步骤一电脑右击，手机当然也可以找到相应工具即可，获取首页源码，确定你的网站logo的class属性名称步骤二找到所用模板文件得全局css开始添加:before 选择器代码提示(.logo:before{})logo改为你自己的class属性名/**logo扫光效果CSS**/ .logo:before{ /**根据logo外div样式名称修改before前名称**/ content:""; position: absolute; left: -665px; top: -460px; width: 120px; height: 10px; /**光标的宽度，可根据实际调整**/ background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 1s ease-in 1s infinite; -o-animation: searchLights 1s ease-in 1s infinite; animation: searchLights 1.5s ease-in 1s infinite;/**第一个数字参数控制扫光速度，数字越大越慢**/ } @-webkit-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-o-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @-moz-keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } @keyframes searchLights { 0% { left: -100px; top: 0; } to { left: 120px; top: 100px; } } /*END*/

如何让css按钮居中&CSS小技巧

2022-12-23T14:20:00+08:00

margin：auto的用途水平垂直居中margin: auto;{margin-left:auto;margin-right:auto;}缩写形式为:{margin:0 auto;}0为上下边距，可按自己需要设置成不同的实现最高渲染性能的去除下边框cssdiv { 　border: 1px solid; 　border-bottom: 0 none; /**key code here**/}增加icon按钮点击区域点击区域大小从 16 × 16 一下子提升到 38 × 38.icon- clear { 　width: 16px; 　height: 16px; 　border: 11px solid transparent; 　 /**key code here**/}永远居中的dialog(可兼容到IE7)demotitle><style> .container { position: fixed; top:0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container:after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .content { width: 240px; height: 120px; padding: 20px; } .dialog { display: inline-block; vertical-align: middle; border-radius: 6px; background-color: #fff; font-size: 14px; white-space: normal; }style>head><body><div class="container"><div class="dialog"><div class="content">这dialog永远居中div>div>div>body>html>去除页面默认滚动条(PC端有效)/**good code**/html {overflow: hidden;}/**bad code**/html, body { overflow: hidden;} </article> </main></body></html>