Web性能优化-合并js与css,减少请求
2015-10-30 11:46
537 查看
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的。人总要进步的嘛。js也可以像咱们的C#一样进行模块化开发,那进行模块化的时候就需要将不同的模块放在不同的文件中,这样问题就来了,我们页面的请求数会增多,减少页面请求的方式就是将多个css文件或者js文件进行合并,参考了下别人的博客,总结下下面的方法。
首先先讲下思路,添加一个asp.net处理程序,然后在页面中的script标签中的src的值设置为这个asp.net的处理程序的路径,并加上一个参数(css类似),如下所示:
<link href="/Css/CombineFiles.axd?fn=index" rel="stylesheet" />
在程序中我们可以获取到fn的值,然后根据fn的值在/css/路径下面找到对应的文件名,如fn的值为index,那么就在/css/文件夹下面找到文件名问index.txt的文件,然后打开读取文件中的内容,如下所示:
第一行表示的是当前请求的css文件,如果是js文件,则第一行为js。后面的每行则表示的为文件名。在上图中的例子中,表示的是,当前请求的是a.css,b.css,c.css合并和的文件。那我们只需要将三个文件合并后并输入就行了。下面直接上代码:
此代码是在园子里一个园友的博客的基础上进行改进的。链接找不到了,在这里就不贴出来了。
最后呢,需要在配置文件中加入如下配置信息:
上面的代码中可以实现功能是,合并js或css,并将其缓存起来,当每次请求时都会判断当前浏览器中是否有缓存,且是否有效,如果有效则直接响应302,告诉浏览器本地缓存是可以使用的,不需要从服务器端重新下载,介绍了很多流量,并且提高了速度。假如,在项目升级的过程中,修改了js或者css,想让浏览器强制下载最新的文件时,可将HttpRuntime.Cache中的缓存移除,这样当重新请求时,会重新合并文件,并响应到客户端。
如下所示:
原文链接:http://www.cnblogs.com/zskbll/p/4912950.html
首先先讲下思路,添加一个asp.net处理程序,然后在页面中的script标签中的src的值设置为这个asp.net的处理程序的路径,并加上一个参数(css类似),如下所示:
<link href="/Css/CombineFiles.axd?fn=index" rel="stylesheet" />
在程序中我们可以获取到fn的值,然后根据fn的值在/css/路径下面找到对应的文件名,如fn的值为index,那么就在/css/文件夹下面找到文件名问index.txt的文件,然后打开读取文件中的内容,如下所示:
第一行表示的是当前请求的css文件,如果是js文件,则第一行为js。后面的每行则表示的为文件名。在上图中的例子中,表示的是,当前请求的是a.css,b.css,c.css合并和的文件。那我们只需要将三个文件合并后并输入就行了。下面直接上代码:
public class CombineFiles : IHttpHandler { #region IHttpHandler Members /// <summary> /// 缓存key值 /// </summary> private const string CacheKeyFormat = "_CacheKey_{0}_"; public bool IsReusable { get { return true; } } public void ProcessRequest(HttpContext context) { HttpRequest request = context.Request; HttpResponse response = context.Response; string cachekey = string.Empty; bool flag = false;//标志是否是最新合并的内容 string fn = request.QueryString["fn"]; if (!string.IsNullOrEmpty(fn)) { cachekey = string.Format(CacheKeyFormat, fn); CompressCacheItem cacheItem = HttpRuntime.Cache[cachekey] as CompressCacheItem; if (cacheItem == null) { flag = true; string path = context.Server.MapPath(""); StringBuilder sb = new StringBuilder(); //找到请求的文本文件 var con = File.ReadAllText(string.Format("{0}\\{1}.txt", path, fn)). Split(new[] { '\r', '\n' }, StringSplitOptions.RemoveEmptyEntries); response.ContentType = con[0] == "css" ? "text/css" : "text/javascript"; for (int i = 1; i < con.Length; i++) { var filename = string.Format("{0}\\{1}.{2}", path, con[i],con[0]); if (File.Exists(filename)) { string readstr = File.ReadAllText(filename, Encoding.UTF8); sb.Append(readstr); } } cacheItem = new CompressCacheItem() { Type = con[0], Content = sb.ToString(), Expires = DateTime.Now.AddDays(30) }; HttpRuntime.Cache.Insert(cachekey, cacheItem, null, cacheItem.Expires, TimeSpan.Zero); } string ifModifiedSince = request.Headers["If-Modified-Since"]; if (!string.IsNullOrEmpty(ifModifiedSince)&&cacheItem.Expires>DateTime.Parse(ifModifiedSince)&&!flag) { response.StatusCode = (int)System.Net.HttpStatusCode.NotModified; response.StatusDescription = "Not Modified"; } else { response.Write(cacheItem.Content); SetClientCaching(response, cacheItem.Expires); } } } private void SetClientCaching(HttpResponse response, DateTime expires) { response.Cache.SetETag(DateTime.Now.Ticks.ToString()); response.Cache.SetLastModified(DateTime.Now); //public 以指定响应能由客户端和共享(代理)缓存进行缓存。 response.Cache.SetCacheability(HttpCacheability.Public); //是允许文档在被视为陈旧之前存在的最长绝对时间。 response.Cache.SetMaxAge(TimeSpan.FromTicks(expires.Ticks)); response.Cache.SetSlidingExpiration(true); } private class CompressCacheItem { /// <summary> /// 类型 js 或 css /// </summary> public string Type { get; set; } // js css /// <summary> /// 内容 /// </summary> public string Content { set; get; } /// <summary> /// 过期时间 /// </summary> public DateTime Expires { set; get; } } #endregion }
此代码是在园子里一个园友的博客的基础上进行改进的。链接找不到了,在这里就不贴出来了。
最后呢,需要在配置文件中加入如下配置信息:
<configuration> <system.web> <compilation debug="true" targetFramework="4.0" /> <httpHandlers> <add verb="GET" path="*.axd" type="Angular.CombineFiles"/> </httpHandlers> </system.web> </configuration>
上面的代码中可以实现功能是,合并js或css,并将其缓存起来,当每次请求时都会判断当前浏览器中是否有缓存,且是否有效,如果有效则直接响应302,告诉浏览器本地缓存是可以使用的,不需要从服务器端重新下载,介绍了很多流量,并且提高了速度。假如,在项目升级的过程中,修改了js或者css,想让浏览器强制下载最新的文件时,可将HttpRuntime.Cache中的缓存移除,这样当重新请求时,会重新合并文件,并响应到客户端。
如下所示:
HttpRuntime.Cache.Remove(string.Format("_CacheKey_{0}_","index"));
原文链接:http://www.cnblogs.com/zskbll/p/4912950.html
相关文章推荐
- 深入理解PHP7内核之FAST_ZPP
- Flex 性能优化常用手法总结
- oracle 性能优化建议小结
- Lua性能优化技巧(一):前言
- Lua性能优化技巧(五):削减、重用和回收
- Lua性能优化技巧(三):关于表
- Lua性能优化技巧(四):关于字符串
- MySQL性能优化 出题业务SQL优化
- PowerShell脚本性能优化技巧总结
- SQL SERVER性能优化综述(很好的总结,不要错过哦)第1/3页
- MySQL Index Condition Pushdown(ICP)性能优化方法实例
- Ajax无刷新分页的性能优化方法
- dedecms负载性能优化实例,三招让你的dedecms快10倍以上第1/2页
- 如何减少浏览器的reflow和repaint
- javascript日期处理函数,性能优化批处理
- JavaScript 性能优化小结
- JQuery教学之性能优化
- jQuery 性能优化手册 推荐
- jQuery 性能优化指南(2)
- JQuery性能优化的几点建议