js文件合并，压缩，缓存，延迟加载

做web前段也有一段时间了，对于web中js文件的加载有些体会想跟大家一起分享一下。

1.首先说说js文件的合并和压缩吧

为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并压缩

代码如下：

[csharp]
public class Js : IHttpHandler
   {

       public void ProcessRequest(HttpContext context)
       {
           context.Response.ContentType = "text/javascript";
           HttpRequest request = context.Request;
           HttpResponse response = context.Response;
           if (!request.QueryString.AllKeys.Contains("href"))
           {
               response.Write("No Content");
           }
           else
           {
               string href = context.Request.QueryString["href"].Trim();
               string[] files = href.Split(new string[]{",","，"},StringSplitOptions.RemoveEmptyEntries);
               foreach (string fileName in files)
               {
                   string filePath = context.Server.MapPath(fileName);
                   if (File.Exists(filePath))
                   {
                       string content = File.ReadAllText(filePath, Encoding.UTF8);
                       content = JavaScriptCompressor.Compress(content);
                       response.Write(content);
                   }
                   else
                   {
                       response.Write("\r\n未找到源文件"+filePath+"\r\n");
                   }
               }
           }
       }

       public bool IsReusable
       {
           get
           {
               return false;
           }
       }
   }
当我们在浏览器访问js时如：
http://localhost:58798/js.ashx?href=scripts/jquery.lazyload.js,scripts/jquery.validate.js

返回结果如图：

但是在实际开发中很多项目为了最求js的合并和压缩，开发很不友好把js的引用放在一个地方，写了很长的一串啊，如上面js引用。

下面说说如何改善吧：
[csharp]
public static class Extensions
   {
       const string jsFileKey = "JSFileKey";
       static string jshandlerUrl = string.Empty;
       public static string JsHandlerUrl
       {
           get
           {
               if (string.IsNullOrEmpty(jshandlerUrl))
               {
                   jshandlerUrl = ConfigurationManager.AppSettings["jsHandlerUrl"] ?? string.Empty;
               }
               return jshandlerUrl;
           }
       }

       public static void AppendJsFile(this HtmlHelper htmlHelper, string jsFile, int group = 1)
       {
           NameValueCollection jsFiles = null;
           if (htmlHelper.ViewContext.HttpContext.Items.Contains(jsFileKey))
           {
               jsFiles = htmlHelper.ViewContext.HttpContext.Items[jsFileKey] as NameValueCollection;
           }
           else
           {
               jsFiles = new NameValueCollection();
               htmlHelper.ViewContext.HttpContext.Items.Add(jsFileKey, jsFiles);
           }
           if (jsFiles.AllKeys.Contains(group.ToString()))
           {
               string fileUrl = jsFiles[group.ToString()];
               if

补充：web前端 , JavaScript ,