HTML性能优化：疯狂压缩实践与注意事项

148 浏览量更新于2024-09-01 收藏 67KB PDF 举报

在"WEB高性能开发之疯狂的HTML压缩"这篇文章中，作者讨论了在Web性能优化中引入HTML压缩的可能性和优势。通常情况下，服务器不常对HTML启用gzip压缩，因为HTML通常是动态内容，不会被浏览器缓存，而压缩操作会消耗服务器资源。然而，对于JS和CSS，由于它们会被浏览器缓存，开启gzip能带来性能提升，因为减少了传输的数据量。作者提到自己曾经开发过一个组件，用于自动合并、压缩JS和CSS，并且添加版本号。在文章中，作者将这个功能扩展到了HTML压缩上，通过在程序启动时扫描所有HTML、JSP（如ASP.NET的aspx）文件，利用正则表达式进行查找和替换来进行压缩。压缩过程中需要注意以下几点： 1. 避免压缩`<pre>`和`<textarea>`标签内的内容，这些区域需要保持格式不变。 2. 删除HTML注释时要谨慎，保留特定类型的注释，如条件注释``到`<![endif]-->`，因为它们有时会被服务器代码使用。 3. 对于嵌入式JS中的注释，要区分注释符号是否实际为字符串的一部分，避免误删。 4. 处理`<%%>`嵌入的服务器代码时，需要特殊对待，确保注释处理正确，以免影响代码执行。源代码部分展示了使用Java实现的HTML压缩算法，包括使用`StringReader`读取原始HTML，`StringWriter`进行替换操作，以及利用`java.util.regex.Pattern`和`Matcher`类进行正则匹配。虽然文章没有提供具体的代码片段，但读者可以参考提供的链接获取完整的源码，并根据需要进行调整以适应.NET环境。本文主要探讨了如何在Web高性能开发中通过自动化工具对HTML进行压缩，以减少HTTP传输的体积，提高页面加载速度，尤其是在处理大量静态内容的情况下，这种策略显得尤为重要。同时，文章强调了在压缩过程中要考虑到代码的可读性和特定标签的处理，以确保压缩的HTML仍然保持其功能性。

WEB高性能开发之疯狂的高性能开发之疯狂的HTML压缩压缩

一篇随笔中网友 skyaspnet 问我如何压缩HTML，当时回答是推荐他使用gzip，后来想想，要是能把所有的

html，jsp(aspx)在运行前都压缩成1行未免不是一件好事啊。

一般我们启动gzip都比较少对html启动gzip，因为现在的html都是动态的，不会使用浏览器缓存，而启用gzip的话每次请求都

需要压缩，会比较消耗服务器资源，对js,css启动gzip比较好是因为js,css都会使用缓存。我个人觉得的压缩html的最大好处就

是一本万利，只要写好了一次，以后所有程序都可以使用，不会增加任何额外的开发工作。

在“JS、CSS的合并、压缩、缓存管理”一文中说到自己写过的1个自动合并、压缩JS,CSS,并添加版本号的组件。这次把压缩

html的功能也加入到该组件中，流程很简单，就是在程序启动(contextInitialized or Application_Start)的时候扫描所有

html,jsp(aspx)进行压缩。

压缩的注意事项：

实现的方式主要是用正则表达式去查找，替换。在html压缩的时候，主要要注意下面几点：

1. pre,textarea 标签里面的内容格式需要保留，不能压缩。

2. 去掉html注释的时候，有些注释是不能去掉的，比如：

3. 压缩嵌入式js中的注释要注意，因为可能注释符号会出现在字符串中，比如： var url = "http://www.cnblogs.com"; // 前面

的//不是注释

去掉JS换行符的时候，不能直接跟一下行动内容，需要有空格，考虑下面的代码：

else

return;

如果不带空格，则变成elsereturn。

4. jsp(aspx) 中很有可能会使用<% %>嵌入一些服务器代码，这个时候也需要单独处理，里面注释的处理方法跟js的一样。

源代码：

下面是java实现的源代码，也可以猛击此处下载该代码，相信大家都看的懂，也很容易改成net代码：

复制代码代码如下:

import java.io.StringReader;

import java.io.StringWriter;

import java.util.*;

import java.util.regex.*;

/*******************************************

* 压缩jsp,html中的代码，去掉所有空白符、换行符

* @author bearrui(ak-47)

* @version 0.1

* @date 2010-5-13

*******************************************/

public class HtmlCompressor {

private static String tempPreBlock = "%%%HTMLCOMPRESS~PRE&&&";

private static String tempTextAreaBlock = "%%%HTMLCOMPRESS~TEXTAREA&&&";

private static String tempScriptBlock = "%%%HTMLCOMPRESS~SCRIPT&&&";

private static String tempStyleBlock = "%%%HTMLCOMPRESS~STYLE&&&";

private static String tempJspBlock = "%%%HTMLCOMPRESS~JSP&&&";

private static Pattern commentPattern = Pattern.compile("", Pattern.DOTALL | Pattern.CASE_INSENSITIVE

| Pattern.MULTILINE);

private static Pattern itsPattern = Pattern.compile(">\s+?<", Pattern.DOTALL | Pattern.CASE_INSENSITIVE |

Pattern.MULTILINE);

private static Pattern prePattern = Pattern.compile("<pre[^>]*?>.*?</pre>", Pattern.DOTALL | Pattern.CASE_INSENSITIVE |

Pattern.MULTILINE);

private static Pattern taPattern = Pattern.compile("<textarea[^>]*?>.*?</textarea>", Pattern.DOTALL |

Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);

private static Pattern jspPattern = Pattern.compile("<%([^-@][\w\W]*?)%>", Pattern.DOTALL |

Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);

// <script></script>

private static Pattern scriptPattern = Pattern.compile("(?:<script\s*>|<script type=['\"]text/javascript['\"]\s*>)(.*?)</script>",

Pattern.DOTALL | Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);

private static Pattern stylePattern = Pattern.compile("<style[^>()]*?>(.+)</style>", Pattern.DOTALL |

Pattern.CASE_INSENSITIVE | Pattern.MULTILINE);

// 单行注释，

private static Pattern signleCommentPattern = Pattern.compile("//.*");

// 字符串匹配

private static Pattern stringPattern = Pattern.compile("(\"[^\"\n]*?\"|'[^'\n]*?')");

// trim去空格和换行符

private static Pattern trimPattern = Pattern.compile("\n\s*",Pattern.MULTILINE);

private static Pattern trimPattern2 = Pattern.compile("\s*\r",Pattern.MULTILINE);

// 多行注释

private static Pattern multiCommentPattern = Pattern.compile("/\*.*?\*/", Pattern.DOTALL | Pattern.CASE_INSENSITIVE |

Pattern.MULTILINE);

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38691970

粉丝: 6
资源: 959

HTML性能优化：疯狂压缩实践与注意事项

网页地址中http和https的区别全解析

fcl-demo:演示DApp流

Asp生成静态HTML完整实例(包括列表分页)-ASP源码.zip

高性能WEB开发 图片压缩篇

WEB高性能开发：HTML压缩技术解析

高性能WEB开发 JS、CSS的合并、压缩、缓存管理

web高性能开发系列随笔 BearRui(AK-47)版

高性能网站web开发之图片管理

高性能web开发（2）

高性能WEB开发 为什么要减少请求数，如何减少请求数!

最新资源

高性能WEB开发图片压缩篇

高性能WEB开发为什么要减少请求数，如何减少请求数!