用 500 字节生成 ASCII 世界地图

有人展示了一种很有趣的做法：只用 445 字节数据，生成一张看起来相当可信的 ASCII 世界地图。

这个例子的核心不在于地图绘制算法本身，而是把地图文本数据压缩到极小体积，再交给浏览器在运行时解压并渲染。

关键技巧：deflate 压缩

实现思路是先将 ASCII 地图数据进行 deflate 压缩，再以 base64 的形式嵌入到 data: URI 中。随后用 JavaScript 在浏览器端完成读取、解压和显示。

示例代码大致如下：

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
  )

这里有几个值得注意的点：

• fetch() 不一定只能请求 HTTP URL，也可以读取 data: URI。
• DecompressionStream('deflate-raw') 可以在浏览器中直接处理 deflate 原始压缩流。
• 解压后的文本被放进 <pre> 标签中，用等宽字符保留 ASCII 地图的形状。

为什么这个例子有意思

这个案例展示了浏览器原生 API 的组合能力：

1. 用 data: URI 内联极小体积的数据；
2. 用 fetch() 获取这段内联数据；
3. 用 DecompressionStream 在客户端解压；
4. 用简单 DOM 操作完成展示。

对于喜欢代码高尔夫、ASCII art、前端 API 边界玩法的人来说，这是一个很精巧的小实验。它也提醒我们，一些现代浏览器 API 已经能覆盖过去需要额外库才能完成的压缩与流处理任务。