开发者社区> 黛琳ghz> 正文

前端开发面试题—HTML5应用程序缓存 (离线存储)

简介: 今天分享一下我遇到的前端面试题,什么是HTML5应用程序缓存 (离线存储)??
+关注继续查看
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅1698元/3年,点击这里立即抢购>>>

(福利推荐:你还在高价请网络公司做企业网站?现在阿里云建站来啦,仅需500元/年快速搭建企业官网,点击这里立即抢购>>>

?今天分享一下我遇到的前端面试题,什么是HTML5应用程序缓存 (离线存储)?

image

什么是应用程序缓存?

HTML5 引入了应用程序缓存(Application Cache),这意味着可对 web 应用进行缓存,并可在没有因特网连接时进行访问

应用程序缓存为应用带来三个优势:

  • 离线浏览 - 用户可在应用离线时使用它们
  • 速度 - 已缓存资源加载得更快
  • 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

使用应用程序缓存,通过创建 cache manifest 文件,可轻松创建 web 应用的离线版本。


🔗Cache Manifest 基础

如需启用应用程序缓存,请在文档的<html> 标签中包含 manifest 属性:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
image.gif

每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

manifest 文件的建议文件扩展名是:".appcache"。

注意:manifest 文件需要设置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。


🔗Manifest 文件

manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

manifest 文件有三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存
  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

🔗CACHE MANIFEST

第一行,CACHE MANIFEST,是必需的:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js
image.gif

上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件被加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然可用。


🔗NETWORK

下面的 NETWORK 部分规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:

NETWORK:
login.asp
image.gif

可以使用星号来指示所有其他其他资源/文件都需要因特网连接:

NETWORK:
*
FALLBACK
image.gif

下面的 FALLBACK 部分规定如果无法建立因特网连接,则用 "offline.html" 替代 /html/ 目录中的所有文件:

FALLBACK:
/html/ /offline.html
image.gif

?注释:第一个 URI 是资源,第二个是替补。


🔗更新缓存

一旦应用被缓存,它就会保持缓存直到发生下列情况:

  • 用户清空浏览器缓存
  • manifest 文件被修改
  • 由程序来更新应用缓存

参考来自

w3school HTML5 应用程序缓存

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端学习案例1-生成器面试题
前端学习案例1-生成器面试题
14 0
前端学习案例-js预编译面试题2
前端学习案例-js预编译面试题2
10 0
前端学习案例-js预编译面试题1 原
前端学习案例-js预编译面试题1 原
8 0
前端学习案例1-obj面试题
前端学习案例1-obj面试题
13 0
前端学习案例1-proxy面试题
前端学习案例1-proxy面试题
6 0
前端学习案例1-proxy面试题
前端学习案例1-proxy面试题
6 0
前端学习案例4-promise面试题之4
前端学习案例4-promise面试题之4
6 0
前端学习案例3-promise面试题之3
前端学习案例3-promise面试题之3
10 0
前端学习案例7-promise面试题之7
前端学习案例7-promise面试题之7
8 0
前端学习案例9-原型面试题1
前端学习案例9-原型面试题1
4 0
+关注
黛琳ghz
欢迎访问我的开发者社区 CSDN博客地址?https://blog.csdn.net/weixin_53231455?type=blog
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载


http://www.vxiaotou.com