用445字节渲染世界地图
Simon Willison··作者 Simon Willison
关键信息
这个实现使用 `fetch()` 读取 `data:` URI，然后把响应流通过 `DecompressionStream('deflate-raw')` 解压，再转成文本并插入到 DOM 中。最终效果是一幅用很小字号显示的 ASCII 地图；文章也把它定位为一个巧妙的技术趣味展示，而不是重大的实用突破。
资讯摘要
Simon Willison 介绍了一个名为“用 500 字节构建世界地图”的项目，展示了如何用极少的数据生成一幅看起来相当可信的 ASCII 世界地图。这个成果归功于 Iwo Kadziela，并且在 Codex 的协助下完成，最终地图只用了 445 字节的数据。文章强调，关键并不是复杂的渲染引擎，而是一个被高度压缩的有效载荷，加上一小段 JavaScript 连接逻辑。那段 JavaScript 先用 `fetch()` 读取 `data:` URI，再把响应体交给 `DecompressionStream('deflate-raw')` 解压。
解压后的内容随后被转成文本，并作为 `<pre>` 元素插入页面。地图本身由 ASCII 字符组成，作者认为在如此小的体积下效果出乎意料地好。Willison 还提到，他之前并不知道 `fetch()` 可以这样配合 `data:` URI 使用，这也是这个技巧值得注意的原因之一。该帖子是通过 Hacker News 被发现的，但整体上它仍然主要是一个聪明的浏览器黑客技巧和代码压缩演示。
资讯正文
Iwo Kadziela（在 Codex 的协助下）找到了一种方法，只用 445 字节的数据就生成一幅可信的 ASCII 世界地图：
关键技巧是使用 deflate 压缩，然后再用这段巧妙的 JavaScript 片段把它串联起来。我以前不知道还可以像这样把 <code>fetch()</code> 和 <code>data:</code> URI 一起使用：
<pre><code>fetch('data:;base64,1ZpLsgIxCEXnrM...==').then(
r => r.body.pipeThrough(new DecompressionStream('deflate-raw'))
).then(
s => new Response(s).text()
).then(
t => b.innerHTML = '<pre style=font-size:.65vw>' + t
</code></pre>
经由 <a href="https://news.ycombinator.com/item?id=48747762">Hacker News</a>
来源与参考
收录于 2026-07-06