为什么人们缩小资产而不是HTML?

为什么人们build议缩小网页资源,比如CSS和JavaScript,但是他们从不build议缩减标记? CSS和JavaScript可以在许多不同的页面上使用,而标记每次都被加载,使得标记的缩小变得更加重要。

一个可能的原因是标记通常会更频繁地改变,并且每个页面加载都必须缩小。 例如在一个给定的堆栈溢出页面上,有时间戳,用户名和代表计数可能会随着每个页面加载而改变,这意味着你也必须为每个页面加载进行缩减。 使用像CSS和JavaScript这样的“静态”文件,你可以缩短很less,所以在一些人的头脑中,这是值得的。

还要考虑到,每一个主要的networking服务器和浏览器都支持gzip,无论如何它都能快速地压缩所有的标记。 由于缩小速度比gzipping要慢,效果也不好,网站pipe理员可能会决定缩小每个页面的加载量是不值得的。

这里写的答案是非常过时的,甚至有时是没有意义的。 很多事情都是从2009年开始改变的,所以我会尽力回答这个问题。

简短的回答 – 你一定要缩小HTML 。 今天是微不足道的,提供大约5%的加速 。 对于更长的答案阅读整个答案

过去,人们通过手动缩小css / js(通过运行某个特定的工具来缩小它)。 自动化这个过程很难,而且肯定需要一些技巧。 知道现在很多高层网站都没有使用gzip(这是微不足道的),可以理解的是,人们不愿意缩小html。

那么为什么人们简化js,而不是html ? 当你缩小JS,你做了以下事情:

  • 删除评论
  • 删除空白(制表符,空格,换行符)
  • 将长名称改为short( var isUserLoggedIn to var a

即使在过去,这也给了很多改进。 但是在html中,你不能简单地改变长名字,在这段时间内也几乎没有任何评论。 所以唯一剩下的就是删除空格和换行符。 这只给了less量的改善。

这里写的一个错误的论点是,因为内容是用gzip提供的,缩小是没有意义的。 这是完全错误的。 是的,gzip减less缩小的改进是有道理的,但是为什么要gzip注释,如果你可以适当地修剪它们,gzip只是重要的一部分。 这就好像你有一个文件夹来存档,有一些你永远不会使用的垃圾,你决定只是压缩它,而不是清理和压缩。

另一个为什么毫无意义地进行缩小的理由是它是单调乏味的。 可能在2009年这是事实,但在此之后出现了新的工具。 现在你不需要手动缩小你的标记。 像Grunt这样的事情,安装grunt-contrib-htmlmin并将其configuration为缩小您的html是微不足道的。 所有你需要的是像2小时学习咕噜声,并configuration一切,然后一切都自动完成不到一秒钟。 听起来1秒钟(你甚至可以自动化,不用grunt-contrib-watch什么也不做),对于大约5%的改进(即使是gzip)也不是那么糟糕。

还有一个说法是,CSS和JS是静态的 ,HTML是由服务器生成的,所以你不能预先缩小它。 这在2009年也是如此,但目前越来越 多的网站看起来像一个单一的页面应用程序,其中服务器瘦,客户端正在做所有的路由,模板和其他逻辑。 所以服务器只给你JSON和客户端呈现它。 在这里你有很多的页面和不同的模板的HTML。

所以要完成我的想法:

  • 谷歌正在缩小HTML。
  • pageSpeed是要求你缩小html
  • 这是微不足道的
  • 它提供了〜5%的改善
  • 它与gzip不一样

考虑一下:

HTML:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Demo</title> <link rel="stylesheet" type="text/css" href="nonminify.css"/> </head> <body> <div title="My non minifiable page"> <p class="http://www.example.com/classes/class/lorem-ipsum"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </body> </html> 

有了这个CSS文件:

 div[title="My non minifiable page"] p[class~="http://www.example.com/classes/class/lorem-ipsum"] { white-space:pre; } 

鉴于此,对于只能看到HTML文件的HTML缩小器来说,find可以安全缩小的东西是不可能的。

我想这很难,因为有时候像空格这样的东西用于格式化,也许取决于文档types。

标记往往是dynamic生成的,即使是静态的,通常也会有一堆页面。 JavaScript和CSS通常以每个站点一个文件的方式进行缩小,因此更容易手动缩小(或脚本)。