为啥人们会缩小资产而不是 HTML？

Posted 2023-02-21

技术标签:

【中文标题】为啥人们会缩小资产而不是 HTML？【英文标题】：Why people minify assets and not the HTML?为什么人们会缩小资产而不是 HTML？ 【发布时间】：2010-11-21 08:44:07 【问题描述】：

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

【问题讨论】：

好问题。可能是因为开发人员喜欢看他们漂亮的代码。更好的是那些认为他们通过“缩小”服务器端代码（例如 php）来节省带宽的人...... @Breakthrouh：我明白你在说什么（关于输出到浏览器），但我想知道.. 如果网络服务器将 php 脚本（文件）传递给（可选外部）php fcgi -服务器，我假设确实节省了 fcgi 服务器的带宽......这也让我想知道“缩小”的 php 脚本是否可以节省内存（我的意思是，在它转换为字节码并执行之前）.. html 内容应该被缩小。以前很难做到这一点，而且收益很小。检查my answer 【参考方案1】：

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

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

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

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

移除 cmets 删除空格（制表符、空格、换行符）将长名称更改为短名称（var isUserLoggedIn 到 var a）

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

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

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

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

所以结束我的想法：

google 正在缩小 html。 pageSpeed 要求您缩小 html 做起来很简单它提供了大约 5% 的改进和gzip不一样

【讨论】：

关于服务器生成的 HTML 我认为值得一提的是像jade 这样的模板引擎，它允许您在源代码中编写格式良好的标记并默认输出缩小的 HTML。它还可以让您轻松处理Alohci's answer中提到的情况@ 为了……通常在站点大小上节省大约 4-8kb 的目的，缩小删除了可维护性。您可以通过压缩网站上的单个 jpg 并删除图像的元数据来节省更多费用。 @MahdiYounesi 没有人维护最小化资产。当您缩小 html 时，您不会删除现有的非缩小版本。也没有人告诉你，一旦你缩小了 html，你就不应该改进你的 images/js，uze gzip 等。你可以做所有的事情。 @SalvadorDali 维护-> 更新-> 使用之间的周期很短的现代敏捷工作空间的想法不是吗？缩小会增加这一点，因为您必须在没有客户浏览器提供的潜在额外数据的情况下破译客户错误报告。从取代 PageSpeed 的 Lighthouse 开始，HTML 缩小不再被列为以任何方式影响最终得分的因素。【参考方案2】：

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

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

【讨论】：

CSS 和 JS 也可以压缩，但缩小仍然被视为具有显着优势。微不足道。 gzipping 减少了约 70%，而缩小 gzip 文件减少了约 5%。 @Adrian 我不会相当那么远。有时有充分的理由可以保存每个字节。我讨厌缩小的原因是它经常使浏览器内调试变得很痛苦，而且通常有更好的方法来加速网站。对我来说，这些是独立的域。缩小是关于去除谷壳，不影响结果的不必要的材料。压缩是关于压缩剩余部分。 Gzip 做得很好，但是当我们可以将它减少到零时，使用 gzip 压缩是没有意义的。 @rjmunro - 这是一个相当大的逻辑飞跃。与在客户端解析时间所获得的时间相比，您在服务器端进行即时压缩所损失的时间肯定更多。 Gzipping 减少了浏览器必须下载的数据量，这通常会大大超过解压缩所需的时间。【参考方案3】：

考虑一下：

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

【讨论】：

我怀疑 white-space:pre 声明是例外而不是正常的，因为它很少使用。没错，但它不仅仅是空白：当然。 DOM 遍历 JavaScript 还可以对缩小器可以更改的空白的存在做出假设。虽然看起来很奇怪，但空白在 HTML 中很重要，而在 CSS 和 JavaScript 中则大多不是空格在解析过程中会被标记化，但每个空格字符都会传递到 DOM 中。见whatwg.org/specs/web-apps/current-work/multipage/… 和whatwg.org/specs/web-apps/current-work/multipage/…。通过通常应用 white-space:normal css 规则，在渲染阶段会发生空白的折叠。如果不是这样，浏览器怎么可能实现 white-space:pre？我不否认，在网络上使用的 99% 的 HTML 页面可能会减少空白而不被破坏，但会有 1% 的情况并非如此。我希望你的 HTML 压缩器好运，但如果它被大量使用，预计会收到来自网络作者的一系列奇怪的错误报告，指责压缩器破坏了他们的网页。 @Alohci，我刚刚注意到你的 cmets。我写了一个标记压缩器，它不会干扰内容的解析输出。所有空格，除非有意应用相反的表示条件，否则标记在被解析之前被标记化，并且标签之间的空格（除了单例）被完全删除。了解标记的正确空白规则允许每次以自动方式缩小标记而不会造成伤害。【参考方案4】：

我想这很难，因为有时会使用诸如空格之类的东西来格式化，可能取决于文档类型。

【讨论】：

【参考方案5】：

Page Speed 建议缩小标记：

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

【讨论】：

【参考方案6】：

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

【讨论】：

以上是关于为啥人们会缩小资产而不是 HTML？的主要内容，如果未能解决你的问题，请参考以下文章

为啥我的图像（本地资产或下载的资产）没有在 iOS 14 上显示，而是在使用 ReactNative 0.62.x 的 Android 上显示？

如何在 Yii 中缩小除 jQuery 之外的所有资产？