缓存设置在哪里打开_HTML5缓存机制是什么？怎么更新缓存

大佬教程收集的这篇文章主要介绍什么是HTML5缓存机制？如何更新缓存，大佬教程小哥觉得还不错，现在分享给大家，也给大家参考。本文中的 HTML5 缓存机制是什么？如何更新缓存，有一定的参考值，这里，希望对大家有所帮助。[推荐阅读：HTML5教程]。

背景

离线缓存是 HTML5 提供的一项新功能。HTML5提供的离线缓存功能，可以用于在本地缓存网站的一些常用文件，缓存后的页面仍然可以在没有互联网的情况下访问。可以缓存的文件类型有很多种，包括但不限于 HTML、CSS、JS、静态图像资源等。

事实上，离线缓存不仅在没有网络的情况下使用，而且在有网络的情况下，本地缓存的文件仍然会首先使用。在存在网络的情况下，浏览器将返回 200

脱机缓存有很多好处。首先，它可以有效提升用户体验，节省用户流量。其次，它可以提高页面加载速度，缓存资源加载速度更快。第三，它减少了服务器上的负载，浏览器只会从服务器下载更新或更改的资源。

浏览器支持

基本上所有主流浏览器都支持，除了IE，毕竟是太棒了，像这个浏览器一样，不兼容。

@@

要在页面上使用离线缓存，只需将 @@属性 添加到页面的 html 中，如下所示。

…

当浏览器加载页面时，它发现html有@@，它会请求cache.file（ps：这只是一个文件名，一般约定是to。最后，文件通常放在项目的根目录下）。

顺便说一句：此文件需要将 MIME 类型配置为“text/cache-”，这是必需的。您需要在服务器上配置它。

让我们来看看这个文件（缓存）应该如何写入

我从以下位置找到了这些来源：

缓存 - 此标题下列出的文件将在首次下载后缓存

- 此标题下列出的文件需要连接到服务器，并且不会缓存

- 此标题下列出的文件指定了无法访问页面时的后备页面（例如 404 页）

缓存

# CACHE MANIFEST是必须的！
CACHE MANIFEST
/style.css
/logo.png
/app.js
# 不缓存的文件，永远不会被缓存，且离线时是不可用的
NETWORK:
login.js
# 可以使用星号来指示所有其他资源/文件都需要因特网连接：
NETWORK:
*
# 注释：获取不到资源时的备选路径，就跳转到指定页面
falLBACK:
index.html 404.html

如何更新缓存

如本文开头所述，当浏览器在 html 上找到一个文件时，它将首先请求缓存文件，然后根据文件的内容对其进行缓存。具体流程如下

如果您在线，如果您是第一次访问该应用程序，浏览器将根据文件内容下载相应的资源并离线存储。如果已经访问应用程序并且资源已经离线存储，浏览器会加载带有离线资源的页面，然后浏览器会将新文件与旧文件进行比较，如果文件没有更改，则什么都不做，如果文件已更改，则文件中的资源将重新下载并离线存储。

脱机时，浏览器使用本地缓存。你有没有注意到一个问题，如果我们更新代码后浏览器仍然使用原来的缓存怎么办？

这

最简单和最残酷的方法是手动清除浏览器的缓存，当然，这在生产环境中基本上不会处理。

@@的方式

以“#”开头的注释行也可以用于其他目的。当应用程序的文件更改时，应用程序的缓存会更新。如果编辑图像或修改函数，则不会重新缓存这些更改。更新注释行中的日期和版本号是让浏览器重新缓存文件的一种方式。大佬总结道

以上就是大家收集整理的大佬教程，HTML5缓存机制是什么？如何更新所有内容的缓存，希望本文能帮你解决HTML5的缓存机制？如何更新程序开发中遇到的缓存。

如果你觉得大佬教程网站的内容还不错，欢迎给程序员朋友推荐大佬教程。