45

为什么人们建议缩小 Web 资源，例如 CSS 和 JavaScript，但他们从不建议缩小标记？CSS 和 JavaScript 可以在许多不同的页面上使用，而标记每次都会被加载，这使得标记的缩小变得更加重要。

4

6 回答 6

36

这里写的答案非常过时，有时甚至没有意义。与旧的 2009 年相比，很多事情发生了变化，所以我将尝试正确回答这个问题。

简短的回答 -你绝对应该缩小 HTML。今天它是微不足道的，并且提供了大约5% 的加速。如需更长的答案，请阅读整个答案

回到过去，人们手动缩小 css/js（通​​过一些特定的工具运行它来缩小它）。自动化这个过程有点困难，而且肯定需要一些技能。知道即使现在很多高级网站都没有使用 gzip（这是微不足道的），人们不愿意缩小 html 是可以理解的。

那么为什么人们要缩小 js 而不是 html呢？当你缩小 JS 时，你会做以下事情：

  • 删除评论
  • 删除空格（制表符、空格、换行符）
  • 将长名称更改为短名称 ( var isUserLoggedInto var a)

即使在过去，这也带来了很大的改进。但是在 html 中，您无法将长名称简称为短名称，在那段时间也几乎没有什么可评论的。所以唯一剩下的就是删除空格和换行符。这只会带来少量的改进。

这里写的一个错误论点是，因为内容是使用 gzip 提供的，所以缩小没有意义。这是完全错误的。是的，gzip 减少了缩小的改进是有道理的，但是如果你可以正确地修剪它们，为什么要 gzip 注释和空格，并且 gzip 只是重要的部分。这就像您有一个要归档的文件夹，其中包含一些您永远不会使用的废话，并且您决定只压缩它而不是清理和压缩它。

另一个为什么做缩小毫无意义的论点是它很乏味。可能这在 2009 年确实如此，但在此之后出现了新的工具。现在你不需要手动缩小你的标记。对于像Grunt这样的东西，安装grunt-contrib-htmlmin并配置它来缩小你的 html 是很简单的。您只需要 2 小时来学习 grunt 并配置所有内容，然后一切都会在不到一秒的时间内自动完成。听起来 1 秒（您甚至可以使用grunt-contrib-watch自动执行任何操作）对于大约 5% 的改进来说并不是那么糟糕（即使使用 gzip）。

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

所以结束我的想法：

  • 谷歌正在缩小 html。
  • pageSpeed要求您缩小 html
  • 做起来很简单
  • 它提供了约 5% 的改进
  • 它与 gzip 不同
于 2014-03-17T04:06:10.650 回答
29

一个可能的原因是标记通常会更频繁地更改，并且必须针对每次页面加载进行缩小。例如，在给定的 Stack Overflow 页面上，时间戳、用户名和代表计数可能会随着每次页面加载而改变，这意味着您还必须为每个页面加载进行最小化。使用像 css 和 javascript 这样的“静态”文件，你可以减少很多次，所以在一些人的心目中，这是值得的。

还要考虑每个主要的 Web 服务器和浏览器都支持 gzip，它无论如何都会动态压缩所有标记（快速）。因为无论如何缩小比 gzipping 更慢且效率低得多，所以网站管理员可能会认为为每个页面加载进行缩小不值得处理成本。

于 2009-08-20T15:07:38.407 回答
14

考虑一下：

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 压缩器来说，实际上不可能找到任何可以安全压缩的内容。

于 2009-08-20T21:28:09.880 回答
5

Page Speed 建议缩小标记：

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

于 2011-05-03T02:11:48.557 回答
5

我想这很难，因为有时像空白这样的东西用于格式化，可能取决于文档类型。

于 2009-08-20T15:06:30.907 回答
3

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

于 2009-08-20T15:05:57.007 回答