HTML 空白缩进的开销答案

【问题标题】：Overhead of HTML whitespace indentationHTML 空白缩进的开销
【发布时间】：2012-01-30 12:03:28
【问题描述】：

我开始想知道使用空格缩进 html 文档的总体影响是什么。

为什么不简单地使用制表符来缩进？这不是更具成本效益吗：1 个字符 (\t) 与示例 4 个字符（空格）？

我几乎没有做任何实验，将 asp.net 页面转换为使用选项卡并比较渲染标记的大小。通过仅替换一个局部视图的空白空间，导致 22kb 大小的页面减少到 19,4kb -> 减少了 12%。更改所有缩进，页面最终分配了 16,7kb - 减少了 24%！（使用 chrome 开发工具和 Fiddler 进行验证）

我的推理合理吗？制表符应该主要用于 HTML 的缩进吗？是否有任何理由使用空格（例如与外来浏览器的兼容性）？

ps。 Stackoverflow 似乎也使用空格。将 SO 主页转换为使用选项卡可以减少 9%。这是有效的观察吗？如果是这样，他们为什么不使用标签？

【问题讨论】：

你没有考虑压缩 - 当它打开时，这些差异要小得多。
并且不使用事件标签会减少更多的页面大小。 html 没有缩进的概念。程序员会缩进。真正优化的网站既不使用制表符也不使用空格。
@Oded 你能提供详细的答案吗，你有很好的观点。
@isbadawi 感谢您纠正我的脑屁。
在制表符或空格之间进行选择基本上是一个宗教问题。说真的。

标签： html optimization indentation overhead

【解决方案1】：

StackOverflow 使用 HTTP Compression - 当它打开时，使用空格和制表符之间的差异会缩小 - 很多。

您需要针对压缩版本run your tests 以获得可靠的结果。

对于浏览器不支持服务器支持的压缩方案的情况，您确实有道理。

【讨论】：

感谢您提供可靠的答案。这是一次很好的学习经历。来自您链接的维基百科文章：“Google 工程师 Arvind Jain 和 Jason Glasgow 指出，当用户没有收到压缩内容时，由于页面加载时间增加，每天浪费了超过 99 人年”

【解决方案2】：

第一件事：html 没有缩进规则。它是由程序员为代码可读性和程序结构而完成的。我们可以通过压缩来减少缩进和空格占用的大小。

Minify/compact/compressing HTML : 压缩 HTML 代码，可以节省很多字节的数据，加快下载、解析和执行时间。

StackOverflow 使用 HTTP 压缩

缩小 HTML 与缩小 CSS 和 JS 具有相同的好处：减少网络延迟、增强压缩以及更快的浏览器加载和执行。此外，HTML 经常包含内联 JS 代码（在标签中）和内联 CSS（在标签中），因此缩小这些代码也很有用。

注意：此规则是实验性的，目前专注于减小尺寸，而不是严格的 HTML 格式良好。该规则的未来版本也将考虑正确性。有关当前行为的详细信息，请参阅 Page Speed wiki。

提示：当您对引用 HTML 文件的页面运行 Page Speed 时，它会自动运行 Page Speed HTML 压缩器（它会依次将 JSMin 和 cssmin.js 应用于任何内联 JavaScript 和 CSS）在文件上并将缩小的输出保存到可配置的目录中。

参考：http://code.google.com/speed/page-speed/docs/payload.html#MinifyHTML

【讨论】：

【解决方案3】：

为什么不简单地使用制表符来缩进？这不是更具成本效益吗：1 个字符 (\t) 与示例 4 个字符（空格）？

如果您担心下载的 HTML 大小，您不必担心 tabs-vs-spaces - 您会compress your HTML as it goes over the wire and minify your markup, CSS, and Javascript，它可以真正节省成本，并且不会干扰您自己的编码指南。

【讨论】：