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

时间:2009-08-20 15:03:29

标签: html minify

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

6 个答案:

答案 0 :(得分:29)

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

简短回答 - 你一定要缩小HTML 。它今天微不足道,大约5% speedup。如需更长的答案,请阅读整个答案

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

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

  • 删除评论
  • 删除空格(标签,空格,换行符)
  • 将长名称更改为简短(var isUserLoggedInvar a

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

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

另一个为什么毫无意义进行缩小的论点是它很乏味。可能在2009年就是这样,但是在此之后出现了新的工具。现在您无需手动缩小标记。对于Grunt之类的内容,安装grunt-contrib-htmlmin并将其配置为缩小html是微不足道的。你只需要2个小时来学习咕噜声和配置一切,然后一切都在不到一秒的时间内自动完成。听起来1秒(你甚至可以自动对grunt-contrib-watch做什么都没有)对于大约5%的改进来说并不是那么糟糕(即使使用gzip)。

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

所以要完成我的想法:

  • google正在缩小html。
  • pageSpeed要求你缩小html
  • 做起来很简单
  • 它提供了约5%的改善
  • 与gzip
  • 不同

答案 1 :(得分:25)

一个可能的原因是标记通常会更频繁地更改,并且必须针对每个页面加载进行缩小。例如,在给定的Stack Overflow页面上,有时间戳,用户名和rep计数可能会随着每个页面加载而改变,这意味着您还必须缩小每个页面加载。使用像css和javascript这样的“静态”文件,你可以更少地缩小,所以在某些人看来,这是值得的。

还要考虑每个主要的Web服务器和浏览器都支持gzip,它可以动态压缩所有标记(快速)。因为缩小比gzipping更慢且效率更低,网站管理员可能会决定缩小每个页面的负载并不值得花费处理成本。

答案 2 :(得分:13)

考虑一下:

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 minifier实际上找不到可以安全缩小的任何内容实际上是不可能的。

答案 3 :(得分:5)

我认为这很难,因为有时像白色空格这样的东西用于格式化,可能取决于doctype。

答案 4 :(得分:5)

答案 5 :(得分:3)

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