在服务端合并css和js以减少http请求数
2012-08-08 11:29
471 查看
Web性能优化最佳实践中最重要的一条是减少HTTP请求,它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射(Image Map)和使用Data URI来编码图片。
这段代码实现js和css服务端合并输出, 需要注意的是一定要在web服务器上为merge.aspx设定输出缓存.
这段代码实现js和css服务端合并输出, 需要注意的是一定要在web服务器上为merge.aspx设定输出缓存.
[代码] 调用示例
<link href="/merge/?e=utf-8&file=/css/common.css:/css/base.css:/css/pagination.css" rel="stylesheet" type="text/css" /> <script src="/merge/?e=utf-8&file=/js/jquery.min.js:/js/jquery.pagination.js:/js/jquery.ns_bub.js:/js/common.js:/js/search_suggest.js" type="text/javascript"></script> <!-- merge.aspx设置缓存之后, 该文件的内容可能是长期不变的, 因此当所请求的资源发生改动时, 仍然会收到304. 所以若缓存时间较长影响实时性的话要更变url参数或自行实现缓存机制 --> <link href="/merge/?a=common.css改了请重新下载不然只好7天后才看到效果&e=utf-8&file=/css/common.css:/css/base.css:/css/pagination.css" rel="stylesheet" type="text/css" />
[代码] merge.aspx
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %> <%@ Import Namespace="System.Globalization" %> <%@ Import Namespace="System.Net" %> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (string.IsNullOrEmpty(Request.QueryString["file"]) || string.IsNullOrEmpty(Request.QueryString["e"])) return; //以冒号分隔的url列表 var files = Server.UrlDecode(Request.QueryString["file"]).Split(':'); //url的过滤 var uris = files.Select(x => new Uri(Request.Url, x))//基于本页面构建待请求的uri .Where(x => //不允许请求外部资源 x.Authority == Request.Url.Authority //只能请求.css,js两种资源 && x.AbsolutePath.EndsWith(".css", true, CultureInfo.InvariantCulture) || x.AbsolutePath.EndsWith(".js", true, CultureInfo.InvariantCulture) ); if (!uris.Any()) return; //考虑安全性和资源文件可能是非静态的, 因此用http请求而不是直接file读取 var wc = new WebClient { Encoding = Encoding.GetEncoding(Request.QueryString["e"]) }; var content_type = new[] { "text/css", "application/x-javascript" }; //设置content-type为css或js Response.ContentType = uris.First().AbsolutePath.EndsWith(".css") ? content_type[0] : content_type[1]; //输出 Response.Write( uris.Select(wc.DownloadString).Aggregate((x1, x2) => //在每个js结尾补";"防止未结束的语句导致异常 x1 + (Response.ContentType == content_type[1] ? ";" : "") + Environment.NewLine + x2) ); } </script>
相关文章推荐
- 【整理收藏】合并、压缩JS、CSS文件减少页面HTTP请求数的方法
- 合并多个js,css文件的方法 - 在服务端合并和压缩JavaScript和CSS文件
- 服务端合并和压缩JS和CSS文件
- CSS & JS 服务端合并
- Web性能优化-合并js与css,减少请求
- Web性能优化-合并js与css,减少请求
- nginx插件之concat模块js、css多个请求合并,减少请求数
- iCombo开源喽!Lua版minify,合并CSS、JS文件、减少连接数。
- 在服务端合并js和css文件
- 使用Minify合并css和js减少http请求
- web优化之js、css合并---minify
- gulp 实现 js、css,img 合并和压缩
- [转]使用 YCombo 做 JS /CSS开发 合并 压缩
- JS&CSS文件请求合并及压缩处理研究(四)
- 基于 aspnet 的自动合并输出js和css的解决方案
- [转][前端优化]使用Combres合并对js、css文件的请求
- Tengine配置合并js,css请求,关闭系统信息
- php js css加载合并函数 宋正河整理
- [转]基于 aspnet 的自动合并输出js和css的解决方案
- 合并多个js,css文件的方法(转载)