粒子群算法用于场景削减_使用这三个HTML缩小工具削减文件大小

粒子群算法用于场景削减

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

本文是与SiteGround合作创建的系列文章的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

Although there isn’t clear agreement on the benefits of HTML minification, if you test your website on Google’s PageSpeed Insights, part of the answer you could get as a result is that you should minify HTML, CSS and JavaScript.

尽管在HTML压缩的好处方面尚无明确共识 ，但如果您在Google的PageSpeed Insights上测试您的网站，则可能得到的部分答案是您应该压缩HTML，CSS和JavaScript 。

Minifying a resource means getting rid of redundant elements, that is, elements which the browser doesn’t need in order to process the document correctly.

缩小资源意味着摆脱多余的元素，也就是说，浏览器不需要这些元素即可正确处理文档。

Applying this concept to a HTML document, minification could include things like:

将这个概念应用于HTML文档，缩小可以包括以下内容：

• Stripping HTML comments, as well as comments inside inline CSS and JavaScript code
  剥离HTML注释以及内联CSS和JavaScript代码中的注释
• Removing white space both in HTML code and inline CSS and JavaScript
  删除HTML代码以及内联CSS和JavaScript中的空格
• Removing unnecessary quotes, empty attributes, etc.
  删除不必要的引号，空属性等。
• Getting rid of CDATA sections
  摆脱CDATA部分

These operations contribute to keep the file size down, but also make it easier to keep the code clean and maintainable.

这些操作有助于减小文件的大小，但也可以更轻松地保持代码的清洁性和可维护性 。

压缩与压缩资源 (GZipping Versus Minifying Resources)

Is still worth minifying HTML if you’re using GZip?

如果您使用的是GZip，仍然值得缩小HTML？

One of the arguments against HTML minification is that, gzipping HTML pages already gets rid of white space and reduces file size. This makes minification quite useless.

反对HTML压缩的一个论点是，gzip压缩HTML页面已经摆脱了空白并减小了文件大小。 这使得缩小变得毫无用处。

Firstly, it’s important to point out that the two operations are not the same and don’t achieve the same results.

首先，重要的是要指出这两个操作是不相同的，并且不会获得相同的结果。

The result of minification creates a file made of perfectly valid code that the browser can parse and execute, just like the unminified version of the same file. On the other hand,

缩小结果将创建一个由完全有效的代码构成的文件，浏览器可以解析和执行该文件，就像同一文件的未缩小版本一样。 另一方面，

Gzipping finds all repetitive strings and replaces them with pointers to the first instance of that string. … On the web, gzipping is done directly by your server. … The server compresses the file and sends it across the network like that. The browser receives the file and unzipped it before using it.

Gzipping查找所有重复的字符串，并将其替换为指向该字符串第一个实例的指针。 …在网络上，gzip压缩直接由您的服务器完成。 …服务器压缩文件，然后通过网络将其发送。 浏览器会在使用文件之前接收文件并将其解压缩。

Chris Coyer on CSS Tricks

克里斯·科耶(Chris Coyer)讲CSS技巧

That said, using both techniques can make you save a few bytes. For instance, in Effects of GZipping vs. minifying HTML files, Mads Kristensen discusses a small experiment consisting of both minifying and gzipping the HTML files of four popular websites, i.e., amazon.com, cnn.com, twitter.com and xbox.com. The results show that by undergoing both gzipping and minification, the file size decreases by 9-16%.

也就是说，使用这两种技术可以节省一些字节。 例如，在GZipping与缩小HTML文件的效果中 ，Mads Kristensen讨论了一个小实验，包括缩小和gzip解压缩四个流行网站(即amazon.com，cnn.com，twitter.com和xbox.com)HTML文件。 。 结果表明，通过同时进行gzip和缩小，文件大小减少了9-16％。

The following tools will automate the minification process for you.

以下工具将自动为您完成缩小过程。

最小化 (Minimize)

Minimize is an open source, server-side HTML5 minifier based on the node-htmlparser2.

Minimize是基于node-htmlparser2的开源服务器端HTML5缩小器 。

This tool:

该工具：

• Can minify HTML5 code (not older HTML drafts, no inline PHP code or template files)
  可以缩小HTML5代码(不是较旧HTML草案，没有内联PHP代码或模板文件)
• It’s highly configurable
  高度可配置
• Can distinguish conditional IE comments
  可以区分条件IE注释

… and more. You can visit the project page on GitHub for more details.

… 和更多。 您可以访问GitHub上的项目页面以了解更多详细信息。

Will PeavyHTML Minifier (Will Peavy’s HTML Minifier)

The HTML Minifier is an online tool for HTML minification built with PHP.

HTML Minifier是使用PHP构建HTML缩小在线工具。

To use it, paste your HTML in the textbox, including any CSS and JavaScript you might have added to the markup, and click the Minify button.

要使用它，请将您HTML粘贴到文本框中，包括您可能已添加到标记中的所有CSS和JavaScript，然后单击“ 缩小”按钮。

To ensure scripts still work after minification, Peavy recommends you terminate JavaScript statements with a semicolon (;) and use multiline comments (/* */)

为确保脚本在缩小后仍能正常工作，Peavy建议您使用分号(;)终止JavaScript语句并使用多行注释( /* */ )

Kangax HTML Minifier (Kangax HTML Minifier)

Kangax HTML Minifier is a JavaScript-based HTML minifier with super powers.

Kangax HTML Minifier是具有强大功能的基于JavaScript的HTML Minifier 。

These are just some of this tool’s capabilities:

这些只是此工具的功能之一：

• Removing HTML comments
  删除HTML注释
• Removing comments from styles and scripts
  从样式和脚本中删除注释
• Removing CDATA sections
  删除CDATA部分
• Removing attributes’ quotes
  删除属性的引号
• Removing unnecessary attributes
  删除不必要的属性
• Removing blank attributes
  删除空白属性

• Validating input through HTMLLint

  通过HTMLLint验证输入

You can configure each option according to your own needs.

您可以根据自己的需要配置每个选项。

To learn more about HTML Minifier, you’ll find all the info in Kangax’s Experimenting with HTML Minifier and Perfection Kills.

要了解有关HTML Minifier的更多信息，您可以在Kangax的实验HTML Minifier和Perfection Kills中找到所有信息。

结论 (Conclusion)

Although not so common as minifying CSS and JavaScript, HTML minification is part of Google’s PageSpeed Insights recommendations. Whether it’s worth doing it remains an open question.

尽管不像缩小CSS和JavaScript那样普遍，但是HTML缩小是Google PageSpeed Insights建议的一部分。 是否值得这样做仍然是一个悬而未决的问题 。

In this article, I’ve listed three tools that can help you shave a few bytes off of your web pages by automating a number of HTML minification tasks.

在本文中，我列出了三种工具，这些工具可以通过自动执行许多HTML缩小任务来帮助您从网页上节省一些字节。

What about you, do you think minifying HTML is a good idea? What’s your favorite HTML minification tool?

那您呢，您认为缩小HTML是个好主意吗？ 您最喜欢HTML缩小工具是什么？

翻译自: https://www.sitepoint.com/cut-filesize-with-three-html-minification-tools/

粒子群算法用于场景削减