HTML空格缩进的开头

时间:2011-12-30 10:35:10

标签: html optimization indentation overhead

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

为什么不简单地使用制表符缩进?这不是更具成本效益:1 char(\ t)与示例4 chars(空格)?

我没有通过将asp.net页面转换为使用制表符并比较渲染标记的大小来进行实验。 通过仅替换一个局部视图的白色空间导致22kb大小的页面减少到19,4kb - >这减少了12%。更改所有缩进,页面最终分配164kb - 减少24%! (使用chrome dev工具和Fiddler进行验证)

我的推理是否合理?标签是否应主要用于缩进HTML?是否有任何理由使用空格(例如与异国情调的浏览器兼容)?

PS。 Stackoverflow似乎也使用空格。将SO主页面转换为使用标签可减少9%。这是有效的观察吗?如果是这样,为什么他们没有使用标签?

3 个答案:

答案 0 :(得分:5)

StackOverflow使用HTTP Compression - 启用此选项后,使用空格与制表符之间的差异会大幅减少。

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

对于浏览器不支持服务器支持的压缩方案的情况,您确实有一点意见。

答案 1 :(得分:2)

第一件事:html没有做缩进的规则。它由程序员完成,用于代码可读性和程序结构。更多我们可以通过压缩减少缩进和空白占用的大小。

缩小/压缩/压缩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

答案 2 :(得分:1)

  

为什么不简单地使用制表符缩进?这不是更具成本效益:1 char(\ t)与示例4 chars(空格)?

如果你担心下载的HTML大小,你不会对标签 - 空格大惊小怪 - 你会compress your HTML as it goes over the wire and minify your markup, CSS, and Javascript,这会提供真正的节省,并且不会干扰你自己的编码指南。< / p>