Author Image

admin

6月前 626

ASP.NET  Core Image 标记助手(TagHelper)

本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP)
本文出自《从零开始学 ASP.NET Core 与 EntityFramework Core》目录
视频课程效果更佳:跨平台开发实战掌握 ASP.NET Core 与 EntityFramework Core

如何禁用浏览器缓存

在本章节中,我们将通过一个示例 讨论 ASP.NET Core 中的 Image Taghelper。

浏览器缓存

当我们访问网页时,大多数现代浏览器会缓存该网页的图像。当我们再次访问该页面时,浏览器不再从 Web 服务器再次下载相同的图像,而是从缓存中提供图像。在大多数情况下,这不是问题,因为图像不经常改变。但是这对于开发人员来说,相当的不友好。。。

禁用浏览器缓存

由于某种原因,如果您不希望浏览器使用它的缓存,您可以禁用它。例如,要在 Google Chrome 中禁用缓存

  • 使用 F12 键,启动 Browser Developer Tools
  • 单击"Network"选项卡
  • 选中"Disable cache"复选框

37 1

禁用浏览器缓存的一个明显问题是,每次访问该页面时都必须从服务器下载图片。

ASP.NET Core 中的 Image Taghelper

从性能角度来看,只有在服务器上更改了图片才能下载图片。如果图像未更改,请使用浏览器缓存中的图像。这意味着我们将拥有两全其美的优势。

Image Tag Helper 可以帮助我们实现这一效果。要使用 Image Taghelper,请包含 asp-append-version属性并将其设置为 true。

<img src="~/images/noimage.jpg" asp-append-version="true"/>

Image TagHelper 增强了<img>标签,为静态图像文件提供缓存破坏行为。将图像的内容,生成唯一的散列值并将其附加到图片的 URL。此唯一字符串会提示浏览器从服务器重新加载图片,而不是从浏览器缓存重新加载。

<img
  class="card-img-top"
  src="/images/noimage.jpg?v=IqNLbsazJ7ijEbbyzWPke-xWxkOFaVcgzpQ4SsQKBqY"
/>

每次服务器上的图像更改时,都会计算并缓存新的哈希值。如果图像未更改,则不会重新计算哈希值。使用此唯一哈希值,浏览器会跟踪服务器上的图像内容是否已更改。

哈希缓存行为

Image Taghelper 使用Sha512 哈希计算利用 Web 服务器上的缓存支持来存储给定文件

Image Taghelper 使用 Web 服务器上的缓存服务来存储文件已计算的 Sha512 哈希值。 如果多次请求文件,则不重新计算哈希值。 只有当磁盘上的的文件发生更改时,将会重新计算生成新的哈希值,缓存才会失效。

文章说明

如果您觉得我的文章质量还不错,欢迎打赏,也可以订阅我的视频哦
未得到授权不得擅自转载本文内容,52abp.com 保留版权
感谢您对我的支持

关注微信公众号:角落的白板报

公众号:角落的白板报