【问题标题】:HTML minification? [closed]HTML缩小? [关闭]
【发布时间】:2010-10-18 05:08:54
【问题描述】:

是否有在线工具可以输入页面的HTML 源代码并缩小代码?

我会为 aspx 文件这样做,因为让网络服务器 gzip 压缩它们不是一个好主意...

【问题讨论】:

标签: html minify


【解决方案1】:

以下是对您问题的简短回答:您应该缩小 HTML、CSS、JS。有一个易于使用的工具,称为grunt。它允许您自动执行许多任务。其中JSCSSHTML缩小、file concatenationmany others

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

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

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

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

  • 移除 cmets
  • 删除空格(制表符、空格、换行符)
  • 将长名称更改为短名称(var isUserLoggedInvar a

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

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

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

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

所以结束我的想法:

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

【讨论】:

  • Minfying HTML 绝对不是微不足道的,因为空白在 HTML 中很重要,是否可以删除任何给定的空白取决于 CSS。此外,瘦客户端很糟糕,在我看来,不能作为一个很好的论据来反对缩小动态 HTML 的麻烦。 (一个很好的方法是选择一个模板引擎 [Haml、Jade 等],首先在其渲染输出中不包含不必要的空格。)
  • @minitech 缩小 HTML 微不足道 也很少有可能出现的空白问题(如 <span>)。首先,您总能找到一种方法来编写有效的 html,使其与空格无关。另外,您可能会感到惊讶,但 JS/CSS minifier 也可能会引入错误 - 这并不意味着您不应该使用它。因此,有两种方法可以解决您的问题:学习编写与空白无关的标记,在缩小之前/之后测试您的产品(CSS/HTML/JS)。同样在 Minifier 中,您可以指定要保留的空格。
  • 在非疯狂代码(即不读取自身或按时间作弊的代码)上正确的 JavaScript 压缩器不会引入错误。不,并不总是有一种方法可以编写与空格无关的 HTML,特别是因为 HTML 又不是与空格无关的。完全没有。如果您认为边距会削减它,请务必在此测试复制和粘贴。指定我想要保留的空白听起来像是在浪费时间(Google 除外)......
  • @minitech 你能告诉我不可能以与空白无关的方式编写的 CSS 吗?我在缩小html很久了,至今没看到问题。
  • * { white-space: pre; } 很明显,但是如果您要删除所有空白而不只是折叠它(用边距替换它),文本可能会错误地复制并对文本浏览器和屏幕阅读器造成严重破坏.
【解决方案2】:

这对我有用:

http://minify.googlecode.com/git/min/lib/Minify/HTML.php

它不是一个已经可用的在线工具,但作为一个简单的 PHP 包含它很容易,你可以自己运行它。

不过,我不会保存压缩文件,如果你真的需要动态地保存,启用 Gzip 服务器压缩总是一个更好的主意。 我不知道这在 IIS/.Net 中的参与程度如何,但在 PHP 中它就像在全局包含文件中添加一行一样简单

【讨论】:

    【解决方案3】:

    对于 Microsoft .NET 平台,有一个名为 WebMarkupMin 的库,用于生成 HTML 代码的缩小版。

    此外,还有一个模块可以将此库集成到 ASP.NET MVC - WebMarkupMin.Mvc

    【讨论】:

      【解决方案4】:

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

      此工具使用以下规则运行:

    • 所有 HTML cmets 均已删除
    • 空白字符的运行被转换为单个空格字符
    • 标签内不必要的空白字符被删除
    • 删除两个标签之间的空白字符,其中这两个标签之一不是单例
    • style 标签内的所有内容都被假定为 CSS 并被压缩
    • script 标记内的所有内容都被假定为 JavaScript,除非提供了不同的媒体类型,然后按此类压缩
      • CSS 和 JavaScript 缩小使用重分叉的 JSMin 形式。这个 fork 被扩展为原生支持 CSS 并且还支持 SCSS 语法。 JavaScript 缩小支持自动分号插入,但尚不支持自动插入花括号。

      【讨论】:

      • 嗨,它删除了这一行! <!--[if IE 8.0]><link rel="stylesheet" href="css/ie8.css" type="text/css" /><![endif]-->
      • 是的,如果您使用 ko,这将是一场灾难!
      【解决方案5】:

      也许可以试试HTML Compressor,这是一个前后表,显示了它可以做什么(包括 Stack Overflow 本身):

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

      该项目有非常好的文档记录和支持。

      【讨论】:

        【解决方案6】:

        Don't do this。或者更确切地说,如果您坚持这样做,请在完成任何更重要的网站优化后进行。这项工作的成本/收益极有可能可以忽略不计,尤其是,如果您打算手动使用在线工具来处理每个页面。

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

        (如果您确定要使用它,并且使用 Apache httpd,则可以考虑使用 mod_pagespeed 并打开一些选项以减少空格等,但请注意 the risks .)

        【讨论】:

        • 如果使用自动美化简化代码易于阅读,优化有什么问题?
        • 这可能不是最大的问题 - 但如果在从 dev 编译到 qa 或 prod 时通过一组缩小的正则表达式运行标记是一个微不足道的过程,那么你为什么不想发送输出更小的标记文档?
        • 实际上并不是原始问题的答案:(
        • @Will,几乎可以肯定不是通过缩小正则表达式来运行 HTML 的微不足道的过程,即使使用适当的解析器也可能不是微不足道或快速的。更重要的是,与 JS/CSS 缩小不同,HTML 缩小不会是无损的:任何标签都可以设置为white-space: pre,缩小会破坏预先格式化的文本。
        • @eyelidlessness - 我目前有数千页在提供之前被正则表达式缩小。该功能不是系统中复杂或昂贵的部分。 ...另一方面,如果您想解析计算样式以避免缩小使用white-space:pre 样式的元素,那么是的,缩小 HTML 会更复杂。但是,我不清楚为什么有人要使用 white-space:pre 而不是使用 precode 元素。
        【解决方案7】:

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

        HtmlCompressor 是一个小型、快速且非常易于使用的 .NET 库,它通过删除多余的空格、cmets 和其他不需要的字符而不破坏内容结构来缩小给定的 HTML 或 XML 源代码。结果页面变得更小并且加载更快。压缩器的命令行版本也可用。

        【讨论】:

          【解决方案8】:

          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
          • 用于删除 cmets、缩进和换行符的 ScriptMinifier。
          • 基于浏览器功能(包括 gzip/deflate)压缩所有 html 标记的 HTML 压缩器。
          • 还有 - 最重要的是 - 一个 HTML 压缩器,用于将完整的 html 写入单行并在可能的级别(正在构建中)对其进行压缩。

          【讨论】:

            猜你喜欢
            • 2010-12-11
            • 1970-01-01
            • 1970-01-01
            • 2010-10-02
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2011-01-03
            • 2014-07-22
            相关资源
            最近更新 更多