网络加速手段之一,JS文件资源合并下载

有过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

时间: 2024-10-06 10:15:59

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

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

Node的便民技巧-- 压缩代码 下载图片 压缩代码 相信很多前端的同学都会在上线前压缩JS代码,现在的Gulp Webpack Grunt......都能轻松实现.但问题来了,这些都不会,难道就要面对几十个JS文件一遍遍来回“复制-压缩-创建-粘贴”,这样太不人性化了. 于是可以借助Node + uglify-js 轻松实现.(前提你会点node操作) 1.首先看一下目录: |--uglifyJS |--js |--test1.js |--test2.js |--uglify.js   //这

封装了okhttp的网络框架,支持大文件上传下载,上传进度...

本帖最后由 anjoy紫外线 于 2016-4-20 16:42 编辑   1.用法 对于Eclipse不能运行项目的,提供了apk供直接运行,位于项目根目录 okhttputils_v1.x.x.apk. 本项目Demo的网络请求是我自己的服务器,有时候可能不稳定,网速比较慢时请耐心等待.. 对于Android Studio的用户,可以选择添加: compile 'com.lzy.net:okhttputils:1.3.0'  //可以单独使用,不需要依赖下方的扩展包    compile'c

原生js 文件 上传 下载封装

一 . 下载 1.代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent("MouseEvents"); event.initEvent('click', true, true); obj.dispatchEvent(event); } } const fileDownload = (res,

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

我们在建网站时经常会用js特效代码以使页面更美观,比如js幻灯片代码.js下拉菜单等,但是网页特效一多,如果js文件没有合并的话会降低网站的性能,这时我们就要考虑合并js文件了,ytkah总结了以下几种方法可以实现: 1.把不输出(没有document.write)的公共函数合到一起,如果单纯地把两个js文件内容copy到一起可能会出错 2.新建一个import.js文件,把所有的js文件全部写进去 with(document){ write('<script type="text/jav

使用ajaxfileupload.js文件异步上传文件

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script src="

使用gulp自动化打包合并前端静态资源(CSS、JS文件压缩、添加版本号)

现在正在做的项目更新迭代比较频繁,会经常对前端代码打包部署,手动整合代码文件很麻烦并且浪费时间,所以决定使用gulp来代替手工完成这项工作. 前端静态资源在发版更新时会面临客户端浏览器缓存的问题(可参考这篇文章),解决这个问题可以采用两类方法:覆盖方法(引用资源时加版本号,不修改资源文件名).非覆盖方法(修改资源文件名),本篇文章主要采用的是第一种加版本号的方式,主要用gulp给静态资源自动加版本号和压缩CSS.JS. 原理:通过对JS,CSS文件内容进行Hash运算,生成一个文件的唯一Hash

实际项目中,为什么多个css、js文件要实现合并与压缩?(了解了这你才算入门)

Web性能优化最佳实践中最重要的一条是减少HTTP请求.而减少HTTP请求的最主要的方式就是,合并并压缩JavaScript和CSS文件. 关于编写css时,我们应注意通过一些细节来控制css文件的大小,比如:全局样式.继承样式.缩写样式,空格.注释等:同时你也可以通过在线工具对你的css文件进行压缩,来减少css文件的大小,但压缩后的css文件在可维护性.识别性方面变的特别弱.但更复杂的情况是,如果你的页面里面引用了多个css.多个js文件时就可能处理不好. 多个css.多个js文件进行自动合

用GruntJS合并、压缩JS文件

长期东忙西忙,却不忙更新自己的博客,缺少输出,甚为惭愧 记得我当初刚接触GruntJS的时候对NodeJS一知半解,所以第一次使用花了些时间才熟悉起来.本文希望能帮助朋友们快速入门. 为什么要合并.压缩你的JS文件? 在开始之前,先重申一下这个问题.因为经常在帮忙改东西的时候看到HTML页面上引用了N个JS,而通常看到这个就知道这人JS写得有多糟糕了.HTML里穿插一堆JS代码的我就不吐槽了. 一般在一个HTML文档加载的时候,浏览器会根据HTML代码从上到下读取所需要加载进来的CSS.JS.图

仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp

原文:仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 combo.jsp 源代码下载地址:http://www.zuidaima.com/share/1550463482612736.htm 仿淘宝 css,js 等静态资源合并压缩输出的 jsp 脚本 自己在项目中有用到,用于脚本合并输出 , 使用示例: <link rel="stylesheet" type="text/css" href="http://www.zuidaima.c