[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f-HqAjq0IIaCmMgdtMHfs9KSrzOz4hFOOTnKxiPEgciA":3},{"item":4,"related":46},{"id":5,"type":6,"title":7,"slug":8,"summary":9,"body":10,"coverUrl":11,"productScreenshots":12,"productLinks":13,"authorName":14,"authorUrl":15,"authorSubject":16,"category":17,"tags":22,"sourceLabel":35,"sourceName":36,"sourceUrl":37,"status":38,"seoTitle":39,"seoDescription":39,"canonicalUrl":39,"isFeatured":40,"sno":41,"sortOrder":42,"publishedAt":43,"updatedAt":44,"createdAt":45},"e94c06b4-295e-4888-aeaf-023fe695f23b","article","为什么同一家网站越逛越省流量？网页也有共同词典","http-compression-dictionary-transport","普通 HTTP 压缩只在单个响应内部寻找重复，共享压缩字典则能引用浏览器已经拥有的旧资源，只传新版与旧版之间的差异。本文从网站常用语词典讲起，解释压缩协商、字典传输、缓存收益及部署风险。","打开同一家网站的两个页面，你下载的导航栏样式、组件代码和常用文字往往高度相似。普通压缩会在每一个响应内部寻找重复，但如果浏览器已经拥有上一版文件，能不能直接告诉服务器：“共同部分我有了，只把差异发来”？\n\nCompression Dictionary Transport（压缩字典传输）正是在做这件事。网站可以指定一个资源作为未来响应的字典，让压缩器引用浏览器已有的字节，从而减少重复传输。\n\n## 普通压缩先在一个包裹里找重复\n\n网页文本、CSS 和 JavaScript 含有大量重复。服务器使用 gzip、Brotli 等算法，把重复片段替换成更短的引用；浏览器收到后再还原。双方通过 `Accept-Encoding` 与 `Content-Encoding` 等 HTTP 头协商算法。\n\n这种方式像搬家时给每个箱子单独做编号：同一只箱子里的重复物品可以简写，但另一个箱子即使装着类似东西，也要重新描述。\n\n共享字典则像双方都拿着一本常用语手册。服务器不必再次发送整段内容，只要说“引用手册第几页，再补上这些新字节”。MDN 的 [HTTP 压缩指南](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FGuides\u002FCompression)举了很直观的例子：浏览器已有 `app.v1.js` 时，可以把它作为下载 `app.v2.js` 的字典，大部分传输只需包含两个版本的差异。\n\n```mermaid\nflowchart LR\n    A[浏览器已有旧版资源] --> B[声明可用字典]\n    B --> C[服务器用旧版压缩新版]\n    C --> D[只传字典引用与差异]\n    D --> E[浏览器还原新版资源]\n```\n\n## 它与缓存有什么区别\n\n缓存解决的是“这个资源我是否已经完整拥有”。若文件没有变化，浏览器可以直接复用，不必下载；一旦 URL 或内容版本改变，传统缓存通常要获取新文件。\n\n压缩字典解决的是“新资源与我已有内容有多少相似”。即便新版必须下载，只要大部分字节相同，旧版仍能帮助压缩。两者不是替代关系：缓存避免不必要的请求，字典降低必要请求的体积。\n\n## 为什么不能随便拿任何页面当字典\n\n浏览器必须确认字典确实可用，服务器也要知道客户端拥有哪个版本。缓存过期、字典被清理或内容不匹配时，系统需要安全退回普通响应，否则浏览器将无法解压。\n\n跨用户内容尤其敏感。若压缩过程把私密页面与攻击者可控制的文本混合，响应大小变化可能泄露秘密，这类压缩侧信道在网络安全中已有先例。因此字典的来源、适用范围和缓存分区需要严格约束，不能为了省流量把个人账户页面当作公共词典。\n\n内容分发网络和代理也可能影响协商。如果缓存没有正确区分“支持某字典”与“不支持字典”的客户端，就可能把无法解码的响应发给错误对象。部署时必须正确设置响应头、缓存键和回退路径。\n\n## 哪些资源最可能受益\n\n版本之间高度相似的大型 JavaScript、CSS、字体子集或结构重复的页面，是自然候选。已经高度压缩的 JPEG、视频和压缩包通常收益很小，再压一次还可能因额外元数据变大。\n\n收益也取决于用户是否会继续访问同一站点。只打开一次的落地页，下载字典本身可能得不偿失；频繁使用的 Web 应用不断更新大型资源，更有机会摊薄成本。\n\n共享压缩字典不会让网站神奇地“越用越快”，它只是更聪明地利用浏览器已经下载的知识。最理想的网络请求不是更快地重发同样内容，而是双方先确认共同拥有多少，再只传真正新增的部分。","\u002Fuploads\u002F2026-08-14\u002Fca5428b4-e355-49cf-b664-93068e017841.jpg",[],[],"Foundit","https:\u002F\u002Ffoundit.cn","f39339b1-aaa6-4e86-b0c2-a6e6a21113b5",{"id":18,"name":19,"slug":20,"description":21},"6179d3b6-dc34-4483-9ded-3cd9f1b37a47","科普","abbreviation","介绍各领域新兴概念",[23,27,31],{"id":24,"name":25,"slug":26},"4c2bbea6-eab7-40a8-8447-1de478ff7749","分析","analyse",{"id":28,"name":29,"slug":30},"7c76bfc2-f80f-4ee0-a95d-27bd8708b434","技术","slug",{"id":32,"name":33,"slug":34},"82f427f8-6275-4cbb-bcac-cf1948488006","网页应用","web-app","资料来源","MDN：Compression in HTTP","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTTP\u002FGuides\u002FCompression","published",null,false,60,0,"2026-08-14T00:00:00.000Z","2026-08-14T05:37:25.372Z","2026-08-14T03:06:14.545Z",[47,54,63],{"id":48,"type":6,"title":49,"slug":50,"summary":51,"coverUrl":52,"authorName":14,"sno":41,"publishedAt":43,"createdAt":53},"4533257a-fefb-474e-8df8-1cbf32415c48","网页也能像 App 一样丝滑切场？浏览器在动画期间做了什么","view-transition-api-explained","页面切换时，一个元素仿佛从旧位置飞到新位置，背后并不一定是两套页面同时运动。View Transition API 会协调旧视图快照、新视图和过渡层。本文用舞台换景解释其工作方式、体验价值、性能与无障碍边界。","\u002Fuploads\u002F2026-08-14\u002Fdbb498be-160e-45a6-b053-dd3c74b2a75e.jpg","2026-08-14T03:06:13.955Z",{"id":55,"type":6,"title":56,"slug":57,"summary":58,"coverUrl":59,"authorName":14,"sno":60,"publishedAt":61,"createdAt":62},"d8cd5ddb-84fe-406c-9e2d-49a74aa73aed","网站为什么越来越少让你拼图验证“我是人”","captcha-turnstile-how-human-verification-works","新一代人机验证会在浏览器后台运行挑战并生成短期令牌，再由网站服务器确认结果。本文解释它为什么减少交互、如何防止重放，以及它的误判边界。","\u002Fuploads\u002F2026-09-12\u002F6d69d6f0-e936-4c53-92e2-3412dd3fde18.jpg",44,"2026-09-12T00:00:00.000Z","2026-09-12T04:45:49.580Z",{"id":64,"type":6,"title":65,"slug":66,"summary":67,"coverUrl":68,"authorName":14,"sno":69,"publishedAt":70,"createdAt":71},"e5b311d7-121f-4fd2-bac6-d7b9f4bee903","PDF 里的电子签名，为什么不是贴一张手写图片","pdf-digital-signature-how-it-works","手写签名图片只能说明页面上有一张图，PDF 数字签名则通过私钥、公钥和数字证书验证签名者身份，并检测签名后的文档是否被修改。本文解释两者的关键差别。","\u002Fuploads\u002F2026-09-13\u002F166eb6f1-a717-4cc5-a869-cc1d99584037.jpg",46,"2026-09-13T00:00:00.000Z","2026-09-13T09:35:50.299Z"]