HTML压缩?

99

有没有在线工具可以将页面的HTML源代码输入并压缩代码?

对于aspx文件,我会这样做,因为让Web服务器gzip它们不是一个好主意...


19
服务器压缩有何不良后果? - Chuck
5
据我所读,因为aspx页面不是静态文件,所以IIS不会对其进行缓存,因此它会在每个请求时对页面进行gzip压缩... - Paulo
23
那是个问题吗?除非你的服务器已经达到了99.9%的CPU使用率,否则可能不是问题。gzip压缩通常是必要的,也比任何“缩小”更有效。 - bobince
2
这似乎非常有趣:http://perfectionkills.com/experimenting-with-html-minifier/ http://kangax.github.com/html-minifier/ - StefanS
2
这里的答案已经过时,更不用说其中一些是错误的了。请查看我的关于问题和正确工具的解释 - Salvador Dali
显示剩余4条评论
8个回答

63
也许可以尝试使用HTML压缩器,下面是一张表格展示了它的效果(包括对Stack Overflow的效果):

Sorry, markdown has no concept of tables

它提供了许多选择来优化您的页面,包括脚本最小化(压缩器、Google Closure Compiler、您自己的压缩器),以确保安全。默认选项集非常保守,因此您可以从中开始,并尝试启用更激进的选项。

该项目有非常完善的文档和支持。


58

不要这样做。或者,如果你坚持这样做,在完成更重要的网站优化之后再做。很有可能这种努力的成本效益微不足道,尤其是如果你计划手动使用在线工具处理每个页面。

使用YSlowPage Speed来确定你真正需要优化页面的内容。我猜减少HTML字节数不会是你的网站最大问题。更有可能的是,压缩、缓存管理、图像优化等对整个网站性能的影响更大。这些工具将向你展示最大的问题——如果你已经解决了所有问题,仍然发现HTML缩小使显著差异,那就去做吧。

(如果你确定要这样做,并且使用Apache httpd,则可以考虑使用mod_pagespeed并打开一些选项以减少空格等,但要注意风险。)


25
如果使用自动化美化工具可以轻松阅读经过压缩的代码,那么优化有什么问题呢? - austin cheney
12
这可能不是最大的问题 - 但是,如果在从开发到QA或生产编译时运行标记通过一个缩小的正则表达式集是一个琐碎的过程,那么为什么不希望发送更小的标记文档呢? - Will Peavy
26
实际上并不是对原问题的回答 :( - Chuck Le Butt
7
@Will,将HTML代码通过压缩正则表达式进行压缩几乎肯定不是一件轻松的过程,即使使用适当的解析器也可能不容易且速度较慢。此外,与JS/CSS压缩不同,HTML压缩不会是无损的:任何标签都可以被设置为 white-space: pre 格式,而压缩会破坏预格式化文本。 - eyelidlessness
3
@eyelidlessness - 目前我有数千页内容,这些内容在提供服务之前会被正则表达式压缩。这个功能不是系统中复杂或昂贵的部分。... 另一方面,如果您想要解析计算样式以避免缩小带有 white-space:pre 样式的元素,则缩小HTML将更加复杂。但是,我不清楚为什么有人想要使用 white-space:pre 而不是使用 precode 元素。 - Will Peavy
显示剩余10条评论

35
这是对你的问题的简短回答:你应该压缩你的HTML、CSS和JS。有一个易于使用的工具叫做 grunt,它可以自动化很多任务,包括JSCSSHTML压缩,文件合并许多其他任务
这里写的答案非常过时,甚至有时候毫无意义。从2009年以来,很多事情都发生了变化,所以我会尽力给出正确的答案。
简短回答 - 你应该绝对压缩HTML。今天它已经很简单,并且可以提高5%的速度。如果想要更详细的答案,请阅读整个回答。
在过去,人们手动地压缩css/js(通过运行特定的工具来压缩它)。自动化这个过程有些困难,肯定需要一些技能。知道很多高级网站甚至现在都没有使用gzip(这是微不足道的),可以理解为什么人们不愿意压缩html。
那么为什么人们要压缩js,但不压缩html呢?当你压缩JS时,你会做以下几件事情:
- 删除注释 - 删除空格(制表符、空格、换行符) - 将长名称更改为短名称(var isUserLoggedIn变成var a
即使在旧时代,这些措施也带来了很大的改进。但在html中,您无法将长名称更改为短名称,而且在那个时候几乎没有什么可评论的。因此,唯一剩下的就是删除空格和换行符。这只能带来少量的改进。 这里有一个错误的观点,认为由于内容使用gzip进行服务,所以缩小体积就没有意义了。这是完全错误的。是的,gzip会减少缩小体积的效果,但是如果你可以适当地修剪注释和空格,并且只压缩重要部分,为什么还要gzip整个内容呢?这就像你有一个要归档的文件夹,其中有一些你永远不会使用的垃圾,你决定只是将其压缩而不是清理后再压缩一样。
另一个认为无意义进行缩小的理由是,这很繁琐。也许在2009年这是真的,但是此后出现了新工具。现在,您不需要手动缩小标记。使用像Grunt这样的工具,安装grunt-contrib-htmlmin(依赖于@kangax的HTMLMinifier),并将其配置为缩小html非常容易。您只需要大约2小时学习grunt并配置所有内容,然后一切都会在不到一秒钟的时间内自动完成。听起来1秒钟(您甚至可以使用grunt-contrib-watch自动化为不执行任何操作)对于大约5%的改进(即使使用gzip)来说并不真的那么糟糕。

还有一个观点是CSS和JS是静态的,而HTML是由服务器生成的,因此无法预先进行缩小。这在2009年也是正确的,但目前moremore网站看起来像单页面应用程序,其中服务器很薄,客户端处理所有路由、模板和其他逻辑。因此,服务器只提供JSON,而客户端渲染它。在这里,你有很多页面和不同的模板。

因此,为了完成我的想法:

  • 谷歌正在缩小HTML。
  • pageSpeed要求你缩小HTML
  • 这很容易做到
  • 它可以提高约5%的性能
  • 这不同于gzip

5
缩小HTML绝非易事,因为在HTML中空格是有意义的,是否可以去除某个空格取决于CSS。此外,瘦客户端很糟糕,我认为它不能成为反对缩小动态HTML麻烦的好论据。(一个好的方法是选择一个模板引擎[Haml、Jade等],它在呈现输出时不包含不必要的空格。) - Ry-
@minitech 缩小HTML是微不足道的,但是有一些可能会出现空格问题(如<span>)。首先,您可以始终找到一种编写有效HTML使其无关紧要的方法。此外,您可能会惊讶地听到,但JS / CSS缩小器也可能会引入错误-这并不意味着您不应该使用它。因此,解决问题的两种方法:学习编写无关紧要的标记,测试缩小之前/之后的产品(CSS / HTML / JS)。此外,在Minifier中,您可以指定要保留哪些空格。 - Salvador Dali
1
正确的JavaScript压缩器在非疯狂代码上(即不会自我阅读或通过计时作弊的代码)不会引入错误。 不,没有一种总是可以编写空格不敏感的HTML的方法,特别是因为HTML根本不是空格不敏感的。 如果您认为边距可以解决问题,请确保测试复制和粘贴。 指定要保留哪些空格听起来像浪费时间(除了谷歌)... - Ry-
“* { white-space: pre; }”是一个显而易见的选择,但如果你不仅仅是折叠空格(用边距替换它),而是删除所有空格,那么文本可能会被错误地复制,并对文本浏览器和屏幕阅读器造成破坏。 - Ry-
当然,你可以定制一组缩小规则以完全适应你的需求,但是随着问题的出现而进行修复是很糟糕的,前面提到的模板引擎可以让你实现一致和最小化的结果。 - Ry-
显示剩余5条评论

23

我编写了一个用于缩小HTML的 Web 工具。http://prettydiff.com/?m=minify&html

此工具使用以下规则:

  • 删除所有 HTML 注释
  • 将连续的空白字符转换为单个空格字符
  • 删除标记内部不必要的空白字符
  • 删除其中一个标记不是单例的两个标记之间的空白字符
  • 预定 style 标记内的所有内容为 CSS,并将其缩小
  • 预定 script 标记内的所有内容为 JavaScript,除非提供了不同的媒体类型,然后将其缩小
  • CSS 和 JavaScript 缩小使用了一个大量分叉的 JSMin 形式。这个分支被扩展以原生支持 CSS,并支持 SCSS 语法。JavaScript 缩小支持自动插入分号,但尚不支持自动插入花括号。

7
您好,移除这行代码! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]--> - unloco
1
如果你正在使用 KO,那么这将是一场灾难! - Ray Suelzer

8
这对我很有帮助: http://minify.googlecode.com/git/min/lib/Minify/HTML.php 虽然这不是一个已经存在的在线工具,但它只需要简单的PHP包含即可轻松运行。
如果你真的必须这样做,我不会保存压缩文件,最好动态地进行处理,并启用Gzip服务器压缩。我不知道在IIS/.Net中涉及到多少,但在PHP中,只需在全局包含文件中添加一行即可。

6

CodeProject网站发布了一个示例项目(http://www.codeproject.com/KB/aspnet/AspNetOptimizer.aspx?fid=1528916&df=90&mpp=25&noise=3&sort=Position&view=Quick&select=2794900),可以处理以下情况:

  • 将ScriptResource.axd调用合并为单个调用
  • 根据浏览器能力压缩所有客户端脚本,包括gzip/deflate
  • ScriptMinifier可去除注释、缩进和换行符。
  • HTML压缩器,根据浏览器能力压缩所有HTML标记,包括gzip/deflate。
  • 最重要的是,HTML Minifier可以将完整的HTML写入单行,并在可能的情况下将其最小化(正在建设中)。

3
对于微软.NET平台,有一个名为WebMarkupMin的库,用于对HTML代码进行缩小。
此外,还有一个模块将此库集成到ASP.NET MVC中 - WebMarkupMin.Mvc

1

试试http://code.mini-tips.com/html-minifier.html,这是用于Html Minifier的.NET库。

HtmlCompressor是一个小巧、快速且非常易于使用的.NET库,通过删除额外的空格、注释和其他不必要的字符而缩小给定的HTML或XML源代码,而不会破坏内容结构。结果页面变得更小,加载更快。还提供了压缩器的命令行版本。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接