网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)
2012-08-08 15:24
357 查看
网站中存在一些不会经常变更的内容如静态文件、图片等,我们称之为静态资源。针对这些静态资源使用cache缓存到客户端中,以减少用户再次浏览该网页时的请求量,从而加速了网页的加载、呈现速度。同样,要设置静态资源缓存到客户端,我们需要加一个中间层来处理静态资源的请求。下面以图片为例进行说明。(若图片十分巨大情况下才使用该方法,若图片k级数的话,初次加载速度会更慢,因为IIS对于静态文件和动态文件的处理是不同的,如果图片容量小,动态文件处理的时间占大部分总体加载时间)
未优化:
Default.aspx
首次访问和再次访问页面都要向服务器请求图片。
优化后:
Default.aspx:
ImageRequestHandler.ashx
这里只处理了gif、Jpeg和png格式的图片文件,其他格式的图片文件大家按实际添加修改。假如处理中没有png格式的文件,那么15行至17行的代码可以改写成
那是为什么呢?那是因为Response.OutputStream这个流的无法往回读取造成的,也就是它的CanSeek属性是false。png图像生成的时候不像jpeg,不是流式的,已经写入的就不再管了,而是需要往回不断地写入结构数据。但是response流无法往回seek,所以直接用就不行了。改成一个可以seek的MemoryStream,先生成好png图片,然后再输出到response流。否则会出现GDI+一般性错误。
请求数一样但图片是从cache中获取的,也没有出现请求服务器后,服务器返回304的情况。
下面总结一下设置文件缓存到cache后,触发读取cache已有文件的操作。前提:文件还没过期
1.在浏览器地址栏输入地址,按跳转;
2.点击页面上的超链接;
3.触发服务器控件的事件;
4.脚本代码使用window.open(),location.href='',location.assign(),location.replace()。
下面是即使文件还没过期也不会读取cache中已有文件的操作。
1.按浏览器的刷新按钮;
2.脚本代码使用location.reload()。
关于浏览器的后退和前进按钮,它们与文件是否启用了缓存无关。它们是调用的是history cache中的文件。
未优化:
Default.aspx
1 <html> 2 <head> 3 <head> 4 <body> 5 <img src="images/back.gif"/> 6 <body> 7 </html>
首次访问和再次访问页面都要向服务器请求图片。
优化后:
Default.aspx:
1 <html> 2 <head> 3 <head> 4 <body> 5 <img src="ImageRequestHandler.ashx?p=images/back.gif"/> 6 <body> 7 </html>
ImageRequestHandler.ashx
1 public void ProcessRequest (HttpContext context) { 2 string path = context.Server.MapPath(context.Request.QueryString[0]); 3 string suffix = path.Split('.')[path.Split('.').Length-1]; 4 context.Response.ContentType = string.Format("image/{0}",suffix.ToLower().Equals("png")?"x-png":suffix);//设置MIME,如果是png文件,MIME信息为text/x-png 5 context.Response.Expires = 60*24*30;//设置图片30天过期 6 ImageFormat ift = ImageFormat.Jpeg;//设置默认文件格式 7 Image img = Image.FromFile(path); 8 if(suffix.ToLower().Equals("gif")) 9 { 10 ift = ImageFormat.Gif; 11 }else if(suffix.ToLower().Equals("png")) 12 { 13 ift = ImageFormat.Png; 14 } 15 MemoryStream ms = new MemoryStream(); 16 img.Save(ms,ift); 17 context.Response.OutputStream.Write(ms.GetBuffer(),0,ms.Length);
ms.Close();
ms.Dispose();
img.Dispose(); 18 }
这里只处理了gif、Jpeg和png格式的图片文件,其他格式的图片文件大家按实际添加修改。假如处理中没有png格式的文件,那么15行至17行的代码可以改写成
img.Save(context.Response.OutputStream,ift);
那是为什么呢?那是因为Response.OutputStream这个流的无法往回读取造成的,也就是它的CanSeek属性是false。png图像生成的时候不像jpeg,不是流式的,已经写入的就不再管了,而是需要往回不断地写入结构数据。但是response流无法往回seek,所以直接用就不行了。改成一个可以seek的MemoryStream,先生成好png图片,然后再输出到response流。否则会出现GDI+一般性错误。
请求数一样但图片是从cache中获取的,也没有出现请求服务器后,服务器返回304的情况。
下面总结一下设置文件缓存到cache后,触发读取cache已有文件的操作。前提:文件还没过期
1.在浏览器地址栏输入地址,按跳转;
2.点击页面上的超链接;
3.触发服务器控件的事件;
4.脚本代码使用window.open(),location.href='',location.assign(),location.replace()。
下面是即使文件还没过期也不会读取cache中已有文件的操作。
1.按浏览器的刷新按钮;
2.脚本代码使用location.reload()。
关于浏览器的后退和前进按钮,它们与文件是否启用了缓存无关。它们是调用的是history cache中的文件。
相关文章推荐
- 网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
- 网页优化系列一:合并文件请求(asp.net版)
- [Asp.net 开发系列之SignalR篇]专题四:使用SignalR实现发送图片
- ASP.NET5 中静态文件的各种使用方式
- Mongodb学习笔记三、使用asp.net在Mongodb中存储和读取图片文件
- ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用
- 使用asp.net改变网页上图片颜色比如灰色变彩色
- asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
- asp.net中使用ckfinder2选择图片并返回图片文件的路径的代码
- Asp.Net 网站优化系列之数据库优化措施 使用主从库(全)
- ASP.NET Core静态文件使用教程(9)
- asp.net下使用 jquery.form.js 上传图片(文件)
- 【转】asp.net(c#)使用HttpWebRequest附加携带请求参数以post方式模拟上传大文件(以图片为例)到Web服务器端
- ASP.NET Core 静态文件及JS包管理器(npm, Bower)的使用
- ASP.NET MVC 中使用 HttpModule 来响应或动态改变静态文件
- ASP.NET性能优化 之 构建自定义文件缓存 输出缓存(即静态HTML缓存)
- [dotnetCore2.0]学习笔记之二: ASP.NET Core中,如何灵活使用静态文件和加载自定义配置
- XP专业版中安装了IIS,配置好之后只能访问静态htm网页,图片之类的,但是ASP 文件确不能读取,提示无法显示网页提示
- ASP.NET使用文件上传控件上传图片