专栏首页ASP.NETCore细说ASP.NET Core静态文件的缓存方式

细说ASP.NET Core静态文件的缓存方式

一、前言

  我们在优化Web服务的时候,对于静态的资源文件,通常都是通过客户端缓存服务器缓存CDN缓存,这三种方式来缓解客户端对于Web服务器的连接请求压力的。

  本文指在这三个方面,在ASP.NET Core中静态文件的实现过程和使用方法进行阐述。当然也可以考虑使用反向代理的方式(例如IIS或Nginx),这些不是本文讨论的内容。

  本文重点展示如何通过StaticFileMiddleware中间件,提高网站的性能。虽然这不是唯一缓存文件的方式,我们还可以通过ResponseCacheAttribute特性为ASP.NET Core Mvc的Controller和Action进行缓存的设置。

二、StaticFileMiddleware

  1.文件服务与默认缓存规则

  当创建一个ASP.NET Core的项目时,查看Startup.Configure方法,就会看到默认模板生成的添加StaticFileMiddleware中间件的方法。

public void Configure(IApplicationBuilder app)  
{
    // looging and exception handler removed for clarity

    app.UseStaticFiles();

    app.UseMvc(routes =>
    {
        routes.MapRoute(
            name: "default",
            template: "{controller=Home}/{action=Index}/{id?}");
    });
}

  这样就使你的应用程序能够处理,程序目录下wwwroot目录的静态文件内容。在我们添加文件缓存之前,我们先要看一下StaticFileMiddleware默认的策略是怎么样的。当第一次加载程序时,浏览器将打开页面并下载所有的资源连接。假如页面没有错误返回都是正确那么就是返回文件数据和Http Status为200 -OK的状态。

 然后我们看下这个Http请求对应的Response Header,这里会包含ETagLast-Modified两个值。HTTP内容如下:

HTTP/1.1 200 OK  
Date: Sat, 15 Oct 2016 14:15:52 GMT  
Content-Type: image/svg+xml  
Last-Modified: Sat, 15 Oct 2016 13:43:34 GMT  
Accept-Ranges: bytes  
ETag: "1d226ea1f827703"  
Server: Kestrel  

如果再次请求这个地址的话,浏览器将发送ETagLast-Modified的值到服务端,如果两个值没有变化,那么服务端会发送304状态到浏览器,那么浏览器将使用之前的资源而不是重新下载一份。

  这样就提高了,浏览器的响应性能,因为文件都缓存到了客户端,并且通过304状态,服务端与浏览器的请求流量得以减少。

  2.设置文件缓存时间

  当然我们都知道如果要设置某一请求的缓存,只需要设置Header为Cache-Control的值。那么在StaticFileMiddleware中间件中,我们怎么设置这个Header呢?

using Microsoft.Net.Http.Headers;

app.UseStaticFiles(new StaticFileOptions  
{
    OnPrepareResponse = ctx =>
    {
        const int durationInSeconds = 60 * 60 * 24;
        ctx.Context.Response.Headers[HeaderNames.CacheControl] =
            "public,max-age=" + durationInSeconds;
    }
});

  设置后每一个静态文件的请求都会执行这个方法,包括200和304状态的请求;而且在这个例子里浏览器会自动缓存这些文件24小时,但是在此期间并不会返回404状态

  一旦max-age设置的时间过期,浏览器就不会再使用本地缓存,而去直接请求服务器端。这样已经避免了一些额外的请求到服务器端了。如果我们在浏览器与服务器中间使用CDN缓存文件数据的话,这样就算客户端浏览器的缓存过期了,但是请求也不会到我们的服务器上,而是请求到CDN缓存服务器。

  下面我们看看文件缓存在ASP.NET Core中是如何判断缓存失效的?.NET Core开源的代码为我们提供了了解它的入口【代码 Source Code】。核心代码如下:

_length = _fileInfo.Length;
DateTimeOffset last = _fileInfo.LastModified;  
// Truncate to the second.
_lastModified = new DateTimeOffset(last.Year, last.Month, last.Day, last.Hour, last.Minute, last.Second, last.Offset).ToUniversalTime();
long etagHash = _lastModified.ToFileTime() ^ _length;  
_etag = new EntityTagHeaderValue('\"' + Convert.ToString(etagHash, 16) + '\"'); 

  服务器端如果检测到文件改变就会返回200状态给浏览器,如果没有变化则返回304状态给浏览器端。

  不幸的是,一旦我们添加了缓存,浏览器将不再向服务器发出请求。该文件可能已经完全改变或已被完全删除,但如果浏览器不要求,服务器将不能通知浏览器重新发起无缓存的请求!

  3.为静态文件提供版本号

  通常我们都使用形如https://localhost/js/site.js?v=1 这样的地址来解决缓存的问题。通过给静态文件生成唯一的版本号,做为QueryString进行请求时,服务器将重新输出文件内容。

  在ASP.NET Core中Tag Hepers为我们提供了这样的API:

<script src="~/js/site.js" asp-append-version="true"></script> 

这段代码最终在浏览器端会被渲染为如下Html代码:

<script src="/js/site.js?v=Ynfdc1vuMNOWZfqTj4N3SPcebazoGXiIPgtfE-b2TO4"></script> 

如果静态文件发生改变,Tag Helper就是重新计算文件的哈希值,它采用 SHA256的哈希值。当然以前服务器缓存的文件版本也随之失效了。这个asp-append-version Tag Helper可以支持Img、Script和Link元素。

  ASP.NET Core的源代码我们来看看是怎么计算文件变化的:【源代码 Source Code】

 三、ASP.NET Core与CDN?

  我们在使用CDN时,因为还要进行开发任务,一般我们都要有两套地址,一套是CDN上的文件地址,一套是本地调试开发用的地址。ASP.NET Core中也为我们提供了Tag Helper来解决这样的问题。直接上代码实例吧:

<link rel="stylesheet" href="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/css/bootstrap.min.css"
      asp-fallback-href="~/lib/bootstrap/css/bootstrap.min.css"
      asp-fallback-test-class="hidden" 
      asp-fallback-test-property="visibility" 
      asp-fallback-test-value="hidden" />

<script src="//ajax.aspnetcdn.com/ajax/bootstrap/3.0.0/bootstrap.min.js"
        asp-fallback-src="~/lib/bootstrap/js/bootstrap.min.js"
        asp-fallback-test="window.jQuery">
</script>

Tag Helper:asp-fallback-* 解决开发时使用的文件地址问题。 当然它也可以asp-append-version 两个Tag Helper一起使用,这样就实现了,在CDN文件缓存的同步问题。

四、写在最后

新的ASP.NET Core为我们提供了很多现有互联网行业的解决方案,也给.NET开发人员引入了先进思想。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【干货】”首个“ .NET Core 验证码组件

    众所周知,Dotnet Core目前没有图形API,以前的System.Drawing程序集并没有包含在Dotnet Core 1.0环境中。不过在dotne...

    yoyofx
  • Golang语言排序的几种方式

    map是键值对是一个无序集合。如果需要稳定的迭代顺序,则必须维护独立的数据结构 比如:

    yoyofx
  • ASP.NET Core使用SkiaSharp实现验证码

    本文并没有实现一个完成的验证码样例,只是提供了在当前.NET Core 2.0下使用Drawing API的另一种思路,并以简单Demo的形式展示出来。

    yoyofx
  • 如何在Ubuntu 16.04上使用Nginx的头模块实现浏览器缓存

    网站加载得越快,访问者留下的可能性就越大。当网站充满了由后台加载的脚本运行的图像和交互式内容时,打开网站并不是一项简单的任务。它包括从服务器逐个请求许多不同的文...

    小翼111
  • 如何在CentOS 7上使用Nginx的头模块实现浏览器缓存

    网站加载得越快,访问者留下的可能性就越大。当网站充满了由后台加载的脚本运行的图像和交互式内容时,打开网站并不是一项简单的任务。它包括从服务器逐个请求许多不同的文...

    八十岁的背影
  • 响铃:装机量竞赛已成过去时 移动浏览器下半场该怎么玩

    移动浏览器在2G时代起就已经在功能机上大行其道。随着移动互联网深入,移动浏览器一边蓬勃发展,一边面临着“入口地位下降”的挑战,被APP取代的论调一度甚嚣尘上。

    曾响铃
  • 手机浏览器市场稳定后拼什么?

    手机浏览器看上去一个尴尬的市场。NativeApp、超级App平台与手机浏览器一起抢夺着用户的时间,削弱浏览器的“渠道”能力。不过手机浏览器依然是用户的必备应用...

    罗超频道
  • 手机浏览器缘何成为“TABLE”火药桶?

    关于手机浏览器的一篇文章,分享之。 在欧洲东南部,有个地区叫巴尔干半岛,它地处欧、亚、非三大洲汇合处,控制着地中海和黑海的门户,地理位置极其重要,属于...

    罗超频道
  • 从微软独家垄断到今天百花齐放,Web开发如何才不会被时代淘汰

    在21 世纪初期,大家基本上只使用一种浏览器、一种平台和一种屏幕分辨率。在这种情况下,你只需要使用Windows XP 上的IE6,切换一下屏幕分辨率(比如8...

    博文视点Broadview
  • 极简主义——你手机里面还没有安装“夸克”?

    神无月

扫码关注云+社区

领取腾讯云代金券