为什么浏览器“另存为“总是失败？kage“先渲染、再剥离、后本地化“三阶段原理全解

为什么浏览器另存为总是失败kage先渲染、再剥离、后本地化三阶段原理全解【免费下载链接】kageShadow any website for offline viewing, with the JavaScript stripped out项目地址: https://gitcode.com/gh_mirrors/kage6/kage你有没有这样的经历想永久保存一篇文章点了浏览器另存为网页半年后打开却只剩一片空白或永远转圈的加载图标。kage 就是为解决这个问题而生的开源离线存档工具它克隆网站供离线浏览并把所有 JavaScript 剥离干净。本文将拆解 kage 先渲染、再剥离、后本地化的三阶段原理帮你一次看懂它为什么比另存为可靠得多。浏览器另存为到底败在哪问题不在存而在存错了东西。现代网页早就不是静态文档而是一个靠 JavaScript 实时生成的应用另存为通常会在三个地方翻车失败模式表现根本原因空白页打开后只剩骨架保存的是图纸而非成品JS 没跑内容由 JS 生成死链图片图片裂开、样式丢失CSS 和图片仍指向远程服务器服务器一改或一关就失效幽灵请求离线时仍在偷偷联网保存的 HTML 里还带着统计、推送、埋点脚本一句话总结另存为存的是别人的程序而不是你看到的内容。页面从未真正属于你它只是别人 JavaScript 的一个瘦客户端。kage 的三阶段流水线kage 走了另一条路先用真实的浏览器把页面看完再撕掉所有脚本最后把资源搬到本地。整条管线可以概括为一条流水线种子 URL → 无头 Chrome 渲染 → 最终 DOM 快照 → 剥离 JS → 本地化资源 → 落盘下面逐阶段拆解。阶段一先渲染——让无头 Chrome 替你看完页面kage 不是抓取 HTML 源码而是驱动一个真实的无头 Chrome 打开页面就像你亲眼去看它一样。核心逻辑在 browser/pool.go等页面安静下来加载完成后还会等待约 1.5 秒的网络空闲期Settle让 AJAX 数据、字体、图片全部到位再对最终 DOM 拍快照——保存的就是人眼实际看到的那个页面自动滚动加--scroll参数后kage 会模拟滚动整页触发懒加载图片与无限流内容再滚回顶部快照有并发、有兜底默认 4 个页面并行渲染Workers每页有 30 秒渲染超时单页出错不会拖垮整场克隆安全优先Chrome 沙箱默认开启禁止浏览器私自下载文件到磁盘所有下载都走 kage 自己的下载器。这一步解决的是另存为的死穴内容必须先在浏览器里活过一次才能被完整保存。阶段二再剥离——把活页面变成死标本拿到渲染好的最终 DOM 后kage 交给 sanitize/sanitize.go 做外科手术式清理。它用标准 HTML 解析器遍历整棵 DOM 树删掉一切会动、会联网的东西 所有script标签✋ 所有onclick、onload等事件处理器属性 一切javascript:伪协议链接替换为#⏳meta http-equivrefresh自动跳转preconnect、dns-prefetch等离线毫无意义的预连接提示甚至包括藏在 IE 条件注释里、能绕过普通遍历的script。同时它保留样式、图片、字体、表单和全部语义标签——布局原封不动。官方对此有一句绝妙的比喻保存后的页面是一张照片而不是一个程序。没有跟踪、没有网络调用、没有意外就是一堆能直接双击打开的.html文件。阶段三后本地化——让每个链接都指向你的硬盘前两阶段解决内容完整和绝对安全第三阶段解决离线可用。这一步由两个模块协作完成1. 确定性 URL→路径映射urlx/urlx.go每个 URL 都会经过Normalize归一化小写化 scheme/host、去 fragment、去默认端口然后映射到一个确定的本地路径。妙处在于这是一个纯函数不碰网络、不碰磁盘所以页面工人可以在资源还没下载完之前就先把它在 HTML 里的链接改写成本地相对路径——两边提前约定好字节将来放在哪天然支持并行。2. 资源下载与改写asset/页面里的img src、a href被asset.RewriteHTML批量改写CSS 里的url(...)和import则由 asset/css.go 中的RewriteCSS处理指向的字体和图片同样拉回本地。资源走的是独立的普通 HTTP 下载池与浏览器渲染互不阻塞。整个过程的编排代码在 clone/cloner.go先渲染 → 改写链接 → 剥离脚本 → 写入磁盘一气呵成。三阶段跑完磁盘上长什么样镜像目录一目了然paulgraham.com/ ├── index.html # 首页脚本已剥离 ├── greatwork.html # 某篇文章 └── _kage/ # 保留区资源与爬取状态 ├── paulgraham.com/site.css # 本地化样式url() 已改写 ├── paulgraham.com/pg.png └── state.json # 已访问集合支持断点续爬所有资源都躺在_kage/里所有链接都已是相对路径。接下来怎么用完全由你决定kage serve 目录—— 起个本地静态服务器在浏览器里预览kage pack 镜像目录—— 压缩成单个.zim归档或打包成一个自带网站的可执行文件发给别人什么都不用装用 webview 标签构建后打开就是一个原生窗口里的离线站点像真正的桌面应用。与另存为的对比思维方式变了浏览器另存为kage保存对象未渲染的 HTML 源码 部分附件渲染后的最终 DOM 快照JavaScript原样保留离线仍可能联网全部剥离页面是照片不是程序资源链接指向远程服务器全部改写为本地相对路径SPA / 懒加载页面空白或残缺完整呈现可自动滚动触发加载断点续传无Ctrl-C 保存进度下次接着跑结语回到开头的问题浏览器另存为失败是因为它试图保存一个永远在别人的服务器上运行的页面。而 kage 的三阶段原理给出了另一种答案——先渲染让你看到的成为你拥有的✂️再剥离让拥有变为安全后本地化让安全变为可随身携带。这三步走完后落盘的就不是一份网页副本而是一份可以离线阅读十年、丢给任何设备都能打开的网站快照。想深入了解配置细节可以查阅项目自带的文档 docs/ 与快速上手指南 docs/content/getting-started/quick-start.md。【免费下载链接】kageShadow any website for offline viewing, with the JavaScript stripped out项目地址: https://gitcode.com/gh_mirrors/kage6/kage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考