背景

缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能。在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间。在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件。

虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序。当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件。

方案:

为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL。有很多策略:

ASP.NET Core提供了一种使用 TagHelper来追加版本与查询字符串的机制。它支持以静态资源为目标的最常见的HTML标签:scriptlinkimg。所有你需要做的是在对应Html标签中追加asp-append-version="true"

<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="~/js/site.js" asp-append-version="true"></script>
<img src="~/images/banner1.svg" asp-append-version="true" />

在浏览器中的展现:

<link rel="stylesheet" href="/css/site.css?v=1wp5zz4e-mOPFx4X2O8seW_DmUtePn5xFJk1vB7JKRc" />
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<img src="/images/banner1.svg?v=GaE_EmkeBf-yBbrJ26lpkGd4jkOSh1eVKJaNOw9I4uk" />
每个文件都会有对应的V值,并存储在一个IMemoryCache
文件的URL现在是唯一的,并且会在文件更改时更改,所以我们可以将缓存头添加到响应中,以指示客户端文件可以永久存储在缓存中

实践

为了指示浏览器将文件存储在缓存中,我们必须发送Cache-control头文件和Expires头文件以实现HTTP/1.0兼容性。为了添加这些头文件,我们使用了OnPrepareResponse回调函数StaticFilesOptions。我们来修改这个Startup.cs文件:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = context =>
{
//缓存一年
if (!string.IsNullOrEmpty(context.Context.Request.Query["v"]))
{
context.Context.Response.Headers.Add("cache-control", new[] { "public,max-age=31536000" });
context.Context.Response.Headers.Add("Expires", new[] { DateTime.UtcNow.AddYears().ToString("R") }); // Format RFC1123
}
}
}); app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}

可以查看开发者控制台,发现静态资源都被缓存:

如果不想缓存某个静态文件,修改Startup.cs文件:

app.UseStaticFiles(new StaticFileOptions
{
OnPrepareResponse = context =>
{
//缓存一年
//以下操作是UseStaticFiles内部默认实现
if (!string.IsNullOrEmpty(context.Context.Request.Query["v"]))//资源添加asp-append-version="true"后v是查询参数
{
//context.Context.Response.Headers.Add("cache-control", new[] { "public,max-age=31536000" });
context.Context.Response.Headers.Add("cache-control", new[] { "public,no-cache" });
context.Context.Response.Headers.Add("Expires", new[] { DateTime.UtcNow.AddYears().ToString("R") }); // Format RFC1123
}
}
});

会发现无论怎么刷新,site.js?v=7mkNbU1tgQL1bUeZe3j2R151hKLhLDKO4BBaR-iqCy0文件永远都是重新请求,并没有使用缓存机制

结论

使用HTTP缓存对于性能方面的原因(客户端和服务器端)非常重要。使用ASP.NET Core,您可以利用提供的功能TagHelpers来生成版本控制的URL,并更改默认配置StaticFilesMiddleware为资源Urls添加header的Cache-control属性 

ASP.NET Core缓存静态资源的更多相关文章

  1. 这样入门asp.net core 之 静态文件

    本文章主要说明asp.net core中静态资源处理方案: 一.静态文件服务 首先明确contentRoot和webroot这两个概念 contentRoot:web的项目文件夹,其中包含webroo ...

  2. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  3. ASP.NET Core 缓存技术 及 Nginx 缓存配置

    前言 在Asp.Net Core Nginx部署一文中,主要是讲述的如何利用Nginx来实现应用程序的部署,使用Nginx来部署主要有两大好处,第一是利用Nginx的负载均衡功能,第二是使用Nginx ...

  4. tips 前端 阻止 浏览器缓存静态资源

    手机浏览器 uc上一直表现良好 qq浏览器还有微信上网址直接打开的(一样采用qq浏览器的内核) 大量缓存了静态资源 css js 图片 等这些当出现改动了刷新网页根本没有效果 电脑端浏览器没有问题 因 ...

  5. Redis 入门与 ASP.NET Core 缓存

    目录 基础 Redis 库 连接 Redis 能用 redis 干啥 Redis 数据库存储 字符串 订阅发布 RedisValue ASP.NET Core 缓存与分布式缓存 内存中的缓存 ASP. ...

  6. asp.net core 之静态文件目录的操作

    文章前言 之前写了一篇关于模拟登录的文章,自我感觉内容不太丰富,今天的这篇文章,希望在内容上能丰富些.本人缺少写文章的经验,技术上也是新手,但我会努力的,希望大家多多支持小弟. asp.net cor ...

  7. Asp.net Core 缓存 MemoryCache 和 Redis

    Asp.net Core 缓存 MemoryCache 和 Redis 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 经过 N 久反复的尝试,翻阅了网上无数的资料,GitH ...

  8. nginx缓存静态资源,只需几个配置提升10倍页面加载速度

    nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求:   1.png 可以看到,静态资源占用了整个页面加载用时的90 ...

  9. ASP.NET Core使用静态文件、目录游览与MIME类型管理

    前言 今天我们来了解了解ASP.NET Core中的静态文件的处理方式. 以前我们寄宿在IIS中的时候,很多静态文件的过滤 和相关的安全措施 都已经帮我们处理好了. ASP.NET Core则不同,因 ...

随机推荐

  1. WebService文件上传相关配置(404.13、超出限制、超时)

    最近在做文件上传的功能,遇到一些问题,记录如下,以备以后使用. 1.HTTP Error 404.13 - Not Found,请求筛选模块被配置为拒绝超过请求内容长度的请求. IIS默认允许请求长度 ...

  2. OpenCV中的绘图函数-OpenCV步步精深

    OpenCV 中的绘图函数 画线 首先要为画的线创造出环境,就要生成一个空的黑底图像 img=np.zeros((512,512,3), np.uint8) 这是黑色的底,我们的画布,我把窗口名叫做i ...

  3. Js全选 添加和单独删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. FreeType in OpenCASCADE

    FreeType in OpenCASCADE eryar@163.com Abstract. FreeType is required for text display in the 3D view ...

  5. [mysql使用(1)] 64位Linux下安装mysql-5.7.13-linux-glibc2.5-x86_64

    由于公司临时让将Oracle的数据移植到mysql上面,所以让我在公司服务器上面安装一下mysql.下面就是我的安装过程以及一些错误解决思路.其实对于不同版本安装大体都有差不多. 1. 从官网下载 m ...

  6. time函数获取时间与本地时间不一致

    修改php.ini,将“date.timezone”项修改为“date.timezone = PRC”. 大陆内地可用的值是:Asia/Chongqing ,Asia/Shanghai ,Asia/U ...

  7. LeetCode 287. Find the Duplicate Number (找到重复的数字)

    Given an array nums containing n + 1 integers where each integer is between 1 and n (inclusive), pro ...

  8. LeetCode 110. Balanced Binary Tree (平衡二叉树)

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  9. css中居中方法小结

    ---恢复内容开始--- 1.文字垂直居中 .header_nav-item{ height:38px; line-height:38px; } 即文字所在模块的高度和行高设置成一样的! 2.块元素垂 ...

  10. hdu 6215 -- Brute Force Sorting(双向链表+队列)

    题目链接 Problem Description Beerus needs to sort an array of N integers. Algorithms are not Beerus's st ...