zoukankan      html  css  js  c++  java
  • 网页优化系列二:使用Cache缓存静态文件、图片(asp.net版)

      网站中存在一些不会经常变更的内容如静态文件、图片等,我们称之为静态资源。针对这些静态资源使用cache缓存到客户端中,以减少用户再次浏览该网页时的请求量,从而加速了网页的加载、呈现速度。同样,要设置静态资源缓存到客户端,我们需要加一个中间层来处理静态资源的请求。下面以图片为例进行说明。(若图片十分巨大情况下才使用该方法,若图片k级数的话,初次加载速度会更慢,因为IIS对于静态文件和动态文件的处理是不同的,如果图片容量小,动态文件处理的时间占大部分总体加载时间

      未优化:

      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中的文件。

    更多:网页优化系列三:使用压缩后置viewstate

    欢迎添加我的公众号一起深入探讨技术手艺人的那些事!

    如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
      

  • 相关阅读:
    SpringBoot表单验证
    新创建的maven项目,显示的jdk版本与使用的不一致
    maven常用的构建命令
    maven 配置说明
    springmvc 初始化参数绑定(使用属性编辑器) 来处理类型转换问题
    【LOJ#10180】烽火传递 单调队列+dp
    【洛谷P1854】花店橱窗 线性dp+路径输出
    【CF1076D】Edge Deletion 最短路+贪心
    【洛谷P5020】货币系统 完全背包
    【洛谷P5018】对称二叉树
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/2241049.html
Copyright © 2011-2022 走看看