有过ftp下载文件经验的人都有体验,单独下载一个100M的文件比分开下载100个1M的文件速度快很多,这是因为下载需要解析域名,建立连接等额外开销的时间,因此下载100个文件就要做100次这种额外的开销。因此如果把这个100个文件整合成一个文件下载速度会快很多。

基于上述的方法,可以对HTML中的JS文件也做类似的处理,无论js文件多少个,通过配置文件,把N个js文件合并到一个文件下载。实现手段通过httpHandler。具体代码如下:
web.config文件中:
 
<httpHandlers> 
      <add  verb="*" path="MergedJS.js" type="MergeJS.GetJS"/> 
</httpHandlers> 
 
只对MergedJS.js的请求文件作合并,具体请求到哪个文件,有querystring参数给定,比如本例中使用MergedJS.js?jsid=myjs这种方式。对于其他类型的js文件,则按照IIS默认的请求方式处理。
 
  <appSettings>   
    <add key="myjs" value="jquery-1.4.1-vsdoc.js,   
jquery-ui-1.8.16.custom.min.js,   
jquery-1.4.1.js,   
jquery-1.7.min.js,   
jquery-1.5.2.min.js,   
jquery-1.4.1.min.js,   
jquery.maskedinput-1.3.js,   
json2.min.js,   
jquery.hotkeys-0.0.3.js,   
jquery.loadmask.min.js,   
My.js"/>   
  </appSettings> 
 
 
上述配置,主要用来指定myjs使用哪些文件来合并。
MergeJS.GetJS 这个HttpHandler主要用来处理js。此处涉及到一个缓存的问题,通常情况下,js文件会默认缓存在本地浏览器缓存中,但是对于MergedJS.js这种通过httpHandler所处理的,被视为动态内容,并不会缓存在浏览器中,而是每次都会从服务器端获取最新的内容。因此可以通过编码,强制使用浏览器缓存。
由于反复读取js所做IO操作也是性能瓶颈,因此在global中首先将所有的js预读存在dictionary中,用的时候直接从dictionary中输出,避免了IO操作。代码能够判断js文件是否做了修改,如果修改了,dictionary中的值也会得到更新。
Handler处理部分的代码如下:
 
/// <summary>  
   /// GetJS 的摘要说明  
   /// </summary>  
   public class GetJS : IHttpHandler  
   {  
 
       public void ProcessRequest(HttpContext context)  
       {  
           context.Response.ContentType = "application/x-javascript";//表示是javascript文件类型  
           string jsid = context.Request.Params["jsid"].ToString();  
 
           //获取所有需要Merge的文件  
           string[] jsfiles = System.Configuration.ConfigurationManager.AppSettings[jsid].ToString().Replace("\r", "").Replace("\n", "").Split(',');  
 
           //记录文件的最后修改时间,取最新修改的那个文件的时间。  
           DateTime lastChangeTime = new DateTime();  
           StringBuilder sb = new StringBuilder();  
           foreach (var js in jsfiles)  
           {  
               if (Global.dic_jsfiles.ContainsKey(js))  
               {  
                   DateTime tmplastDateTime = new FileInfo(Global.dic_jsfiles[js].filefullName).LastWriteTime;  
 
                   tmplastDateTime = DateTime.Parse(tmplastDateTime.ToString("yyyy-MM-dd HH:mm:ss"));//去除毫秒信息。  
 
                   if (tmplastDateTime > Global.dic_jsfiles[js].lastModifiedTime)//如果最后修改时间更改,更新dic_jsfiles内容  
                   {  
                       Global.dic_jsfiles[js].content = Common.ReadFile(Global.dic_jsfiles[js].filefullName);//读取新的文件  
                       Global.dic_jsfiles[js].lastModifiedTime = tmplastDateTime;  
                   }  
                     
               }  
               else//如果不存在,则读取该文件  
               {   
                   string filename = context.Request.PhysicalApplicationPath + "Scripts\\" + js.Trim();  
                   Global.dic_jsfiles.Add(filename,new jsFileInfo() {  
                       filefullName = filename,content=Common.ReadFile(filename),lastModifiedTime=new FileInfo(filename).LastWriteTime  
                     
                   });  
                   Common.ReadFile(Global.dic_jsfiles[js].filefullName);  
               }  
 
               sb.Append(Global.dic_jsfiles[js].content + ";");  
                
           }  
 
           //文件最后修改时间  
           lastChangeTime = Global.dic_jsfiles.Max(m => m.Value.lastModifiedTime);  
 
           DateTime If_Modified_Since = new DateTime();  
           if (context.Request.Headers["If-Modified-Since"] == null || context.Request.Headers["If-Modified-Since"] == "")  www.2cto.com
           {  
               If_Modified_Since = new DateTime(1900, 1, 1);//如果读取的请求头中If-Modified-Since没有值,就给它一个默认值为19000101  
           }  
           else 
           {  
               If_Modified_Since = DateTime.Parse(context.Request.Headers["If-Modified-Since"]);  
           }  
           if (If_Modified_Since >= lastChangeTime)//如果客户端请求头中的时间最后一次修改时间,比真实的最后修改时间还新,则直接返回304代码  
           {  
               context.Response.StatusCode = 304;//返回304代码,使其读取缓存  
               context.Response.End();  
           }  
           else//否则  
           {  
               //显示内容  
               context.Response.AddHeader("last-modified", lastChangeTime.ToString());  
           }  
 
           context.Response.Write(sb.ToString());  
       }  
 
       private string ReadFile(string filename)  
       {  
           using (StreamReader sr = new StreamReader(filename, System.Text.UTF8Encoding.UTF8))  
           {  
               return sr.ReadToEnd();  
           }  
       }  
 
       public bool IsReusable  
       {  
           get 
           {  
               return false;  
           }  
       }  
   } 
 
效果如下:使用组合下载的情况,js的下载耗费时间73ms。
但是分开下载的话就比较耗时。
当然,并不是合并为一个文件,下载的速度就一定快,具体的下载速度和策略还受到浏览器的影响,有的浏览器同时开的请求线程多,也会影响下载速度。但是总体来说,如果文件数多的话,下载单一文件总会快点的。
 
http://www.2cto.com/kf/201212/180484.html

网络加速手段之一,JS文件资源合并下载的更多相关文章

  1. 利用Node 搭配uglify-js压缩js文件,批量下载图片到本地

    Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面 ...

  2. js文件上传下载组件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  3. 兼容到ie10的js文件导出、下载到本地

    话不多说,上代码: try { let reader = new FileReader(); let blob = new Blob([res.data], { type: 'application/ ...

  4. js文件合并,压缩,缓存,延迟加载

    做web前段也有一段时间了,对于web中js文件的加载有些体会想跟大家一起分享一下. 1.首先说说js文件的合并和压缩吧 为了便于集中式管理js的合并和压缩我们创建一个Js.ashx文件来专门处理合并 ...

  5. 怎样把网站js文件合并成一个?几种方法可以实现

    我们在建网站时经常会用js特效代码以使页面更美观,比如js幻灯片代码.js下拉菜单等,但是网页特效一多,如果js文件没有合并的话会降低网站的性能,这时我们就要考虑合并js文件了,ytkah总结了以下几 ...

  6. 压缩/批量压缩/合并js文件

    写在前面 如果文件少的话,直接去网站转化一下就行. http://tool.oschina.net/jscompress?type=3 1.压缩单个js文件 cnpm install uglify-j ...

  7. 页面js脚本与img等资源的下载顺序问题。

    引言问题 <img src="background.jpg"><script src="test.js"></script> ...

  8. Tengine的concat模块与js、css合并

    首先,先走出一个误区 ,下面是tengine-cn邮件列表里的一篇邮件原文:“看了这个例子就了解了,这个所谓的合并请求只是把所有的CSS或JAVASCRIPT请求合并,必须是同一个文件类型的.我开始想 ...

  9. JS&CSS文件请求合并及压缩处理研究(一)

    在我们日常的网站开发工作中,一个页面难免会引用到各种样式及脚本文件.了解Web开发的朋友们都知道,页面引用的每一个: <link href="style.css" rel=& ...

随机推荐

  1. haproxy重启

    ps -aux | grep haproxy.cfg sudo kill -9 pidsudo /data/tools/haproxy/sbin/haproxy -f /data/tools/hapr ...

  2. UITableview刷新某一个cell或section

    //一个section刷新 NSIndexSet *indexSet=[[NSIndexSet alloc]initWithIndex:2]; [tableview reloadSections:in ...

  3. Centos环境下部署游戏服务器-简介

    一.前言      在接触这个操作系统之前我一直使用的是ubuntu和mac os,这次由于游戏是测试版本,没有专业的运维人员去做这件事情,只能我这个稍微懂一点linux的人来做这件事情了.由于涉及到 ...

  4. VCL设计方法概论(自己总结了9条),以及10个值得研究的控件 good

    VCL设计方法概论 1. 把Delphi对象改造成一个Windows窗口,主要是要设置Handle和回调函数.在创建一个Windows窗口后,将其句柄赋值给Delphi对象的属性,这个并不难,相当于从 ...

  5. Js 日期操作

    Js获取当前日期时间及其它操作var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    ...

  6. 278. First Bad Version

    题目: You are a product manager and currently leading a team to develop a new product. Unfortunately, ...

  7. 8天学通MongoDB

    随笔分类 - MongoDB 双十一来了,别让你的mongodb宕机了 摘要: 好久没过来吹牛了,前段时间一直赶项目,没有时间来更新博客,项目也终于赶完了,接下来就要面临双十一这场惊心动魄的处女秀考验 ...

  8. angularjs tips

    angular-ui #1 .Impossible to disable fade in modal angularjs ui modal 去掉fade in效果: googleA googleB # ...

  9. nodetree中 前面复选框禁用插件

    nodetree中 前面复选框的去掉插件 extendTreeCheck.js /** * tree方法扩展 * 作者:小雪转中雪 */ $.extend($.fn.tree.methods, { / ...

  10. UML类图几种关系的总结,泛化 = 实现 > 组合 > 聚合 > 关联 > 依赖

    在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Compositi ...