本文主要是介绍JavaScript动态减肥，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
JavaScript动态减肥
随着Ajax的流行，越来越多的JavaScript被用到页面中，一个页面调用js文件大小超过500k都不稀奇了。这么大的带宽会给用户和网络带来诸多不便。其实我们都知道JavaScript及html都有很多空间是多余的。比如white space，网上有一些方案，比如JS Code Compressor。透过这个WinForm工具可以压缩文件大小到原来的一半左右。但如果我们每次deploy,或者用到了动态的js，这个技术就要修改了。我参考了JS Code Compressor v.1.0.3，把所有东西都放到一个页面里去。这样可以通过调用单个页面来实现动态调用压缩后的文件的效果。
比如原来的文件可以通过/path/to/script.js来访问。我们现在建立一个Compress.aspx文件。去掉page source中除了第一行外所有东西。在code behind中加入：
parameters, variables 
protected void Page_Load( object sender, EventArgs e)
{
/* initialize members */
regCStyleComment = new Regex("//*.*?/*/", RegexOptions.Compiled | RegexOptions.Singleline); regLineComment = new Regex("//.* ", RegexOptions.Compiled | RegexOptions.ECMAScript); regSpaceLeft = new Regex("^/s*", RegexOptions.Compiled | RegexOptions.Multiline); regSpaceRight = new Regex("/s*/r/n", RegexOptions.Compiled | RegexOptions.ECMAScript); regWhiteSpaceExceptCRLF = new Regex("[ /t]+", RegexOptions.Compiled | RegexOptions.ECMAScript); regSpecialElement = new Regex( ""[^"/r/n]*"|'[^'/r/n]*'|/[^//*](?<![//S]/.)([^r/n]|//.)*/(?=[ig]{0,2}[^/S])", RegexOptions.Compiled | RegexOptions.Multiline); regLeftCurlyBrace = new Regex("/s*{/s*", RegexOptions.Compiled | RegexOptions.ECMAScript); regRightCurlyBrace = new Regex("/s*}/s*", RegexOptions.Compiled | RegexOptions.ECMAScript); regComma = new Regex("/s*,/s*", RegexOptions.Compiled | RegexOptions.ECMAScript); regSemiColumn = new Regex("/s*;/s*", RegexOptions.Compiled | RegexOptions.ECMAScript); regNewLine = new Regex("/r/n", RegexOptions.Compiled | RegexOptions.ECMAScript); regCarriageAfterKeyword = new Regex( "/r/n(?<=/b(abstract|boolean|break|byte|case|catch|char|class|const|continue|default|delete|do|double|else|extends|false|final|finally|float|for|function|goto|if|implements|import|in|instanceof|int|interface|long|native|new|null|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|var|void|while|with)/r/n)", RegexOptions.Compiled | RegexOptions.ECMAScript); htCaptureFields = new Hashtable(); htRegSpecialElement = new Hashtable(); specialItemCount = 0; //return a javascript file contains compressed vesion of javascript Response.Write(Compress(Script));
} /// <summary> /// Compresses the given String. /// </summary> /// <param name="toBeCompressed">The String to be compressed.</param> public string Compress( string toBeCompressed) { /*clean the hasthable*/ htCaptureFields.Clear(); htRegSpecialElement.Clear(); specialItemCount = 0; /* mark special elements */ MarkQuotesAndRegExps(ref toBeCompressed); if (removeComments) { /* remove line comments */ RemoveLineComments(ref toBeCompressed); /* remove C Style comments */ RemoveCStyleComments(ref toBeCompressed);
} if (removeAndTrimBlankLines) { /* trim left */ TrimLinesLeft(ref toBeCompressed); /* trim right */ TrimLinesRight(ref toBeCompressed); } if (removeEverthingElse) { /* { */ ReplaceLeftCurlyBrace(ref toBeCompressed); /* } */ ReplaceRightCurlyBrace(ref toBeCompressed); /* , */ ReplaceComma(ref toBeCompressed); /* ; */ ReplaceSemiColumn(ref toBeCompressed); } if (removeCarriageReturns) { /* * else[CRLF] * return */ ReplaceCarriageAfterKeyword(ref toBeCompressed); /* clear all CRLF's */ ReplaceNewLine(ref toBeCompressed); } /* restore the formerly stored elements. */ RestoreQuotesAndRegExps(ref toBeCompressed); StringBuilder buffer = new StringBuilder(); buffer.Append( " /* Code Compressed with JS Code Compressor v.1.0.3 - http://www.sarmal.com/ modified by author at http://blog.csdn.net/snleo */" ); buffer.Append(toBeCompressed); return buffer.ToString(); } supporting functions /// <summary> /// Get the script and return as a string. The parameter of this page can be: /// 1. Javascript file location parameter "file=" (eg. "Compress.aspx?file=/path/to/script.js") /// 2. Encoded Javascript code with parameter "code=" (eg. "Compress.aspx?code=%20F...") /// NOTE: In the second form the code is the pure javascript code between tags. /// </summary> private string Script { get { if (Request.QueryString["file"] != null) { string fileName = Request.QueryString["file"]; /* * Localization is always an issue if you are non-English. * System.Text.Encoding class helps sort out this problem. */ string sourcePath = MapPath(fileName); Encoding locale = System.Text.Encoding.GetEncoding(CODEPAGE); StreamReader sr = new StreamReader(sourcePath, locale); String strCompress = sr.ReadToEnd(); sr.Close(); return strCompress; } else if (Request.QueryString["code"] != null) { string strCode = Request.QueryString["code"];//todo: parse return strCode; } else { return null; } } } 因为我把原来库里的代码也拿过来了，所以代码比较多，但fold起来不难看懂。如果要测试很简单。只要察看：
Compress.aspx?file=/path/to/script.js
如果没有错误，应为一行（浏览器会自动wrap）没有缩进的JavaScript代码。他的效能和原来的/path/to/script.js应该一模一样。所以你可以在任何地方来调用。比如：
< head >
< script language ="JavaScript" src ="Compress.aspx?file=/path/to/script.js" type ="text/javascript" ></ script >
</ head >
< script language ="JavaScript" src ="Compress.aspx?file=/path/to/script.js" type ="text/javascript" ></ script >
</ head >
由于项目现在就使用了file include。当query string为code的时候还没有测试和使用过，程序难免有问题。请大家使用的时候注意。另外，如果页面的.js文件大小在200K以下也不建议使用。大概下载的时间和aspx文件运行的时间差不多或者更短。当文件在500K以上，用户带宽比较窄，效果就很明显了。要取得最好的效果，当然还是在deploy的时候老老实实运新一次WinForm版本的程序。
这篇关于JavaScript动态减肥的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
