优化和压缩HTML

Question

我有一些手工制作的网页。在部署它们时，我想通过一个工具运行它们，以便创建新的较小的HTML文件，取出多余的空格等。

我们已经将YUICompressor用于我们的Javascript和CSS，我们倾向于遵循Yahoo性能团队描述的所有技术。

有没有一个好的免费工具可以做到这一点？与YUICompressor类似，我更喜欢适合我们部署过程的工具。

Answer 1

HTML Tidy完成这项工作。

我在我生成的一个文档（一个相当大的文档）上使用以下内容。这为后gzip大小节省了大约10％。

tidy -c -omit -ashtml -utf8 --doctype strict \
    --drop-proprietary-attributes yes --output-bom no \
    --wrap 0  source.html > target.html

• -c - 替换多余的表现标签和属性
• -omit - 删除可选的结束标记
• -ashtml - 使用HTML而不是XHTML（HTML更精简，XHTML对大多数用例没有任何好处）
• -utf8 - 所以我们不必对字符集之外的字符使用实体（实体更多字节）
• --doctype strict - 使用Strict（再次，更精简）
• --drop-proprietary-attributes yes - 摆脱专属垃圾
• --output-bom no - BOM会导致某些客户出现问题
• --wrap 0 - 排长队

Answer 2

如果您愿意，普通的旧版minify也会为您攻击HTML。

但HTML缩小通常不是非常有效：

• 将空白行数减少到一个就不会那么多了。如果你已经在使用gzip / deflate，那将非常有效地压缩空白。您无法删除所有空格，因为单个空格通常会对渲染产生影响，因此需要保留。

• 发表评论可能会产生影响，具体取决于您实际拥有多少评论内容。但是你必须小心不要打出条件评论。

• 除此之外，HTML文档中没有太多可以“缩小”的内容。显然，JS将变量名称打包到最短字符串的想法是不适用的。

• 正如大多数minifiers所做的那样，用正则表达式完成所有这些操作有点狡猾。你必须坚持一个有限的“正常”标记范围，不会绊倒它。

随着HTML的缩小，你通常获得的收益（和gzip后gzip增益更少）比JS / CSS缩小更少，而对于动态生成的页面，你会有更多的开销（因为你不能像静态一样预先缩小它们）脚本/样式）。一些模板语言可能已经具有内置功能，可以在生成时修剪空白;如果在您的环境中可用，请使用它。