2022-08-02
我最近推出了（另一个）名为1kB 俱乐部的网站俱乐部。与1MB Club不同，大多数现代网站都不太容易成为正式会员。构建一个实际提供有用内容的网站，同时将其页面大小压缩到 1,024 字节以下并非易事。
但这是可能的。而且是我自己做的！
注意：非常感谢Tanner，他用自己的最小网站激发了整个“运动”。（他也有一些非常棒的创作/文章！）
HTML
作为参考，您可以在此处查看我的“迷你”网站：cv.tdarb.org。它非常小，仅作为个人履历。它还只有920 字节，并且是有效的 HTML。
让我们看一下完整的 HTML，然后从那里分解：
<!DOCTYPE html><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CV</title><p>Hi, I'm <a href="t">Brad Taunt</a>! I'm a UX designer.<p>Email: hello@tdarb.org<p>Resume<p>Senior Product Designer @ Donorbox, 2021-<br>Web Designer @ Purism, 2019-2021<br>Product Designer @ Benbria, 2013-2019<br>Web Designer @ Netvatise, 2009-2013<p>Projects<p><a href="1">1MB Club</a><br><a href="k">1kB Club</a><br><a href="p">pblog</a><br><a href="s">shinobi</a><br><a href="h">PHPetite</a><br><a href="v">Vanilla CSS</a><p>Writing<p><a href="d">The Death of Personality</a><br><a href="u">Simple Does Not Mean Ugly</a><br><a href="e">Plain Text Emails, Please</a><br><a href="tb">[more]</a>
偷偷摸摸的“黑客”
您会注意到的第一件事是 HTML 被压缩了。空白将额外的数据字节添加到页面权重 - 所以它需要去。接下来，您可能已经发现了奇怪的图标元标记：
<link rel="icon" href="data:,">
这是阻止浏览器发出标准图标请求（通常来自favicon.ico）所必需的。通过添加此元标记，您告诉浏览器加载空图像而不运行另一个服务器请求。这本身就节省了大约 400 字节的带宽！
后面的两个元标记在icon技术上是可选的。这些是viewport和title标签。您可以通过完全排除它们来保存大量数据，但我有自己保留它们的个人原因：
- 我希望网页能够响应
- 我希望页面是有效的 HTML
所以，我保留了这些标签，但尽可能地减少了它们（看着你的title标签）。之后，是时候添加我的内容了！
我们要去的地方，我们不需要标签......
使用 HTML5 的美妙之处在于能够在大多数元素上放弃“默认”和结束标记。想想我们可以节省的所有字节！
在上面的 HTML 中，您会注意到：
- 没有
html元素 - 没有
head元素 - 没有
body元素 - 没有结束
p标签
即使有所有这些“缺失”元素，该网页仍然是有效的 HTML5！疯狂。
节省大量带宽的最后一个技巧是实现自定义hrefURL。页面上的大部分链接都会将用户带到另一个网站——这很好。问题是在a:href标签中包含这些完整域。这些可能会开始消耗大量数据。
幸运的是，我通过 Netlify 托管这个迷你站点，因此我可以充分利用他们的可选_redirects文件。链接现在设置为单个字符（即“1”表示 1MB 俱乐部链接），文件_redirects只是将用户转发到自定义域。相当狡猾！
结束语
这是一个愚蠢的项目，不应该被如此认真地对待。话虽如此，我很想看看人们在限制在 1kB 的情况下还能创建哪些其他页面。
