摘要
1) 一句话总结 Gwtar 是一种高效的单文件静态 HTML 归档格式,它通过在加载早期截断请求并利用 HTTP 范围请求按需提取内联的 tar 数据,解决了将大量资源合并到单一文件中的加载难题。
2) 关键要点
- 项目背景:由 Gwern Branwen 和 Said Achmiz 提出,旨在将大量资源合并为单个 HTML 归档文件,同时保持在浏览器中查看的便利性。
- 核心机制:在页面加载早期触发
window.stop(),阻止浏览器下载整个文件。 - 数据存储:在
window.stop()调用之后,直接内联未压缩的 tar 格式内容。 - 按需加载:页面需要时,通过 HTTP 范围请求(HTTP range requests)从内联的 tar 数据中获取具体内容。
- URL 重写:已加载的 JavaScript 会将资源 URL 重写为
https://localhost/,纯粹为了强制其加载失败。 - 拦截与注入:使用
PerformanceObserver捕获加载尝试,通过resourceURLStringsHandler回调发起 HTTP 范围请求获取未加载的资源,最后使用blob:URL 将其插入正确位置。 - 本地提取方案:若需在本地查看,需使用特定的 Shell 命令(结合
perl和tar --extract)提取出标准的 HTML 文件后再进行浏览。
3) 风险/不足
- 本地查看受限:由于 Web 浏览器的安全限制,gwtar 文件无法直接在本地电脑上打开运行,直接打开只会显示错误提示信息。
- 依赖外部工具提取:本地离线查看必须依赖命令行工具(如
perl和tar)进行手动提取操作。
正文
Gwern Branwen 和 Said Achmiz 提出了一个引人注目的新项目——Gwtar。这是一种静态且高效的单文件 HTML 格式,旨在解决一个核心挑战:如何将大量资源合并到单个归档的 HTML 文件中,同时又不会导致在浏览器中查看时变得极其不便。
核心技术原理
Gwtar 使用的关键技巧是:在页面加载的早期触发 window.stop(),以此来阻止浏览器下载整个文件。紧随该调用之后的是内联的未压缩 tar 内容。
通过这种方式,当页面需要时,它可以发起 HTTP 范围请求(HTTP range requests),按需从该 tar 数据中获取内容。
资源加载与拦截机制
为了实现按需加载,已经加载的 JavaScript 会将资源 URL 重写为指向 https://localhost/——这样做的纯粹目的是让它们加载失败。
随后,系统会使用 PerformanceObserver 来捕获这些尝试加载的操作:
resourceURLStringsHandler回调函数会检查资源是否已经加载。- 如果未加载,则通过 HTTP 范围请求获取该资源。
- 最后,使用
blob:URL 将资源插入到正确的位置。
如果你查看文档源码,就能清楚地看到包含 window.stop() 部分的代码结构。
本地查看的限制与解决方法
有趣的是,作为一种归档格式,如果你直接在自己的电脑上打开该文件,它实际上是无法运行的。如果你尝试本地打开,由于 Web 浏览器的安全限制,你将看到一条提示信息,而不是原本应该显示的页面内容:
“您看到此消息,而不是您应该看到的页面,是因为 gwtar 文件无法在本地打开(由于 Web 浏览器的安全限制)。”
要在电脑上打开此页面,需要使用以下 Shell 命令进行提取:
perl -ne'print $_ if $x; $x=1 if /<!-- GWTAR END/' < foo.gwtar.html | tar --extract提取完成后,在任何 Web 浏览器中打开生成的 foo.html 文件即可正常浏览。