圆弧派博客 - 专注于网络技术 - CSS css知识区 2026-04-29T16:59:00+08:00 Typecho https://www.iarc.top/feed/atom/group/css/ <![CDATA[Gzip与Brotli压缩配置指南]]> https://www.iarc.top/520.html 2026-04-29T16:59:00+08:00 2026-04-29T16:59:00+08:00 青帝 http://icp.iarc.top 在现代 Web 性能优化中,传输体积往往是页面加载速度的第一杀手。一个未经压缩的 JavaScript 文件可能高达几百 KB,而启用压缩后传输量能直接下降 70% 以上,这对带宽和首屏时间的影响是立竿见影的。今天我们就来系统梳理一下目前使用最广泛的两种 HTTP 压缩方案——GzipBrotli,从原理、配置到调优,帮你一次性搞懂它们的区别与最佳实践。

mojto9df.png


一、为什么我们需要压缩?

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 非常简单,通常只需在 httpserverlocation 块中加入:

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.js

  • Apache:启用 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 安装与配置 Brotli

Nginx 官方并未内置 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.cssstyle.css.br,Nginx 会直接返回预压缩的 .br 文件,避免每次压缩的开销,适合构建流程中提前压缩静态资源。

3.4 Apache 与 CDN

  • Apache 可通过 mod_brotli 模块启用,配置类同。
  • 各大 CDN(阿里云、Cloudflare 等)均默认支持 Brotli 无损压缩,仅需勾选启用。

四、Gzip vs Brotli:核心对比

维度GzipBrotli
压缩率中等高 15-25%
压缩速度较慢(尤其是 level > 6)
解压速度接近 Gzip
CPU 消耗较高
浏览器兼容所有现代浏览器
静态预压缩.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/htmltext/csstext/javascriptapplication/jsonapplication/xmlimage/svg+xml
  • JavaScript/CSS 文件:未压缩的 application/javascripttext/css
  • 字体文件:WOFF(已压缩)不用压缩,但 font/ttffont/otf 可酌情压缩。

不压缩的类型包括:图片(image/*)、视频、音频、已压缩格式(如 .zip.woff2.wasm)。否则徒增 CPU 且可能越压越大。

5.3 压缩级别选择

  • Gzipcomp_level 5-6 为甜点区间,再高收益递减。若 CPU 资源充裕且流量巨大,可升至 9 换取微小体积优势。
  • Brotlicomp_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,这是最简单有效的诊断方式。

压缩即正义,让你的字节飞一会儿!

]]>
<![CDATA[魔幻粒子新年快乐祝福源码]]> https://www.iarc.top/479.html 2025-01-27T13:23:00+08:00 2025-01-27T13:23:00+08:00 青帝 http://icp.iarc.top 效果图

新年快乐

源码介绍

魔幻粒子新年祝福是一段基于HTML5 Canvas制作的粒子爆炸,矩阵显字的动画特效代码,给人一种非常大气的视觉感,欢迎对此段代码感兴趣的朋友前来下载使用。

源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改

下载地址

{cloud title="魔幻粒子新年祝福源码" type="default" url="https://pan.quark.cn/s/3323cd0b8b51" password=""/}

]]>
<![CDATA[Joe文章列表添加渐变颜色效果]]> https://www.iarc.top/452.html 2024-07-07T00:41:00+08:00 2024-07-07T00:41:00+08:00 青帝 http://icp.iarc.top 一个大气的文章列表CSS渐变动画,也可以使用图片作为渐变背景,,效果如下(鼠标移动到元素上后颜色会更加突出):
  • 日间模式
    1
  • 夜间模式
    2

    接下来需要编辑的文件以及相对Joe主题的文件路径:

  • joe.index.js /Joe/assets/js
  • joe.index.css /Joe/assets/css
  • joe.mode.css/Joe/assets/css

开始(共三部分)

{tabs}
{tabs-pane label="添加HTML代码"}
打开joe.index.js文件找到如图所示位置
3
可以直接搜joe_list__item wow default定位到,其实一打开就是了。
在第一个a标签元素后面加入如下代码

<div class="article-banner-wrap"></div>
<div class="article-banner"></div>

4
{/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;}

5
其中的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
}

6

我这里不是最底部是因为我后来又加其他东西了,其实也不是一定要最底部,只是方便小白操作和自己描述了。
{/tabs-pane}
{/tabs}

]]>
<![CDATA[给博客评论框添加一个简单的滑动背景图]]> https://www.iarc.top/417.html 2024-03-18T18:06:00+08:00 2024-03-18T18:06:00+08:00 青帝 http://icp.iarc.top 纯css实现,代码各个主题都是通用的,这里以Joe主题为例

效果:

360截图20240317180456301.jpg

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查看自己主题的是哪个组
图片:
ltvcwens.png
最好自己保存下来,以防失效。

]]>
<![CDATA[萤火虫氛围效果(纯CSS)]]> https://www.iarc.top/376.html 2024-02-15T00:21:00+08:00 2024-02-15T00:21:00+08:00 青帝 http://icp.iarc.top

效果图:

360截图20240215001000165.jpg

纯CSS实现,效果可见本页面从下往上飘得一闪一闪的特效,未引入除CSS代码外任何文件。

代码如下

{hide}

<link rel="stylesheet" href="https://www.iarc.top/css/firefly.css" />
<style>.circle-container {position: fixed;top: 0;left: 0;z-index: 1}</style>
<script>
var firefly = "";
for (var i = 1; i <= 100; i++) {
    firefly = '<div class="circle-container"><div class="circle"></div></div>';
    document.writeln(firefly);
}
</script>

{/hide}

可添加至任何HTML网页,CSS文件建议本地化一下,以免链接失效。
]]>
<![CDATA[为自己博客or网页加上鼠标流光背景JS特效]]> https://www.iarc.top/264.html 2023-07-02T16:06:00+08:00 2023-07-02T16:06:00+08:00 青帝 http://icp.iarc.top 鼠标特效

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

{card-default label="快速实现" width=""}

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>
<style>
.sbcanvas{
    display: block;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

{/card-default}

将特效设为博客夜间模式

1.先在body写入

<canvas id="sbcanvas" class="sbcanvas"></canvas>
<script src="https://www.iarc.top/CDN/js/sbxg.js"></script>

2.更改css属性display为none(日间模式不显示该元素)

.sbcanvas{
    display: none;
   position: fixed;
   top: 0;
   z-index: -9;
}
</style>

3.在joe.mode.css文件夹最下面加入以下代码

html[data-night='night'] .sbcanvas{display:block;}

完成以上操作即可大功告成,快去开启夜间模式试一下吧

]]>
<![CDATA[为网站添加个新年灯笼提前增点喜庆]]> https://www.iarc.top/82.html 2022-12-23T22:14:00+08:00 2022-12-23T22:14:00+08:00 青帝 http://icp.iarc.top 效果图(与本篇文章上面一致)

lll.jpg

代码:

将下面代码加在head标签或者body中即可

<!-- 灯笼代码 -->
<meta charset="utf-8">
<div class="deng-box2">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">年</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box3">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">新</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b">
            </div>
        </div>
    </div>
</div>
<div class="deng-box1">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">乐</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c"></div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<div class="deng-box">
    <div class="deng">
        <div class="xian">
        </div>
        <div class="deng-a">
            <div class="deng-b">
                <div class="deng-t">快</div>
            </div>
        </div>
        <div class="shui shui-a">
            <div class="shui-c">
            </div>
            <div class="shui-b"></div>
        </div>
    </div>
</div>
<style type="text/css">
    .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)
        }
    }
</style>
]]>
<![CDATA[给网站logo添加一个扫光CSS特效]]> https://www.iarc.top/80.html 2022-12-23T17:03:00+08:00 2022-12-23T17:03:00+08:00 青帝 http://icp.iarc.top 具体扫光演示:本博客logo
saoguang.jpg

方法开始

步骤一

电脑右击,手机当然也可以找到相应工具即可,获取首页源码,确定你的网站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*/
]]>
<![CDATA[如何让css按钮居中&CSS小技巧]]> https://www.iarc.top/78.html 2022-12-23T14:20:00+08:00 2022-12-23T14:20:00+08:00 青帝 http://icp.iarc.top margin:auto的用途
水平垂直居中
margin: auto;
{margin-left:auto;margin-right:auto;}

缩写形式为:

{margin:0 auto;}

0为上下边距,可按自己需要设置成不同的

实现最高渲染性能的去除下边框css

div {  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)

<html lang="en"><head><meta charset="UTF-8"><title>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;}
]]>