HTML5 应用缓存和常规的 HTML 浏览器缓存有何区别

🌙
手机阅读
本文目录结构

核心

HTML5 的应用缓存最关键的就是支持离线应用

可获取少数或者全部网站内容,包括 HTML、CSS、图像和 JavaScript 脚本并存在本地。

该特性加速了网站的性能,可通过如下方式实现:

<!doctype html>
    <html manifest="example.appcache">
</html>

与传统的浏览器缓存比较,该特性并不强制要求用户访问网站。

需要注意的是:HTML5 应用缓存已废弃,取而代之是service-worker的标准

核心总结

  • 离线缓存是针对整个应用,浏览器缓存是单个文件。
  • 离线缓存断网了还是可以打开页面,浏览器缓存不行。
  • 离线缓存可以主动通知浏览器更新资源。

已废弃

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

离线缓存的起因。

HTML5 之前的网页,都是无连接,必须联网才能访问,这其实也是 web 的特色,这其实对于 PC 是时代问题并不大,但到了移动互联网时代,

设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15 分钟),便无法访问网站,十分不便。

而离线 web 应用允许我们在脱机时与网站进行交互。

什么是离线 Web 应程序?为什么要开发离线的 Web 应用程序?

离线 web 应用程序是指:当客户端本地与 web 应用程序的服务器没有建立连接时,也能正常在客户端本地使用该 web 应用程序进行有关操作。

Web 应用程序已经变的越来越复杂,很多领域都在利用 Web 应用程序。

但是,它有一个致命的缺点:如果用户没有和 Internet 建立连接,他就不能利用这个 web 应用程序了。

因此 HTML5 新增了一个 API,它使用一个本地缓存机制很好的解决了这个问题,使离线应用程序的开发成为了可能。

要想使 web 应用程序在离线状态的时候也能正常工作,就必须把所有构成 web 应用程序的资源文件,如 HTML 文件、CSS 文件、JavaScript 脚本

文件等放在本地缓存中,当服务器没有和 Internet 建立连接时,也可以利用本地缓存中的资源文件正常运行 web 应用程序。

什么是本地缓存,本地缓存与浏览器网页缓存的区别

Web 应用程序的本地缓存与浏览器的网页缓存有许多方面都存在着明显的区别。

  1. 本地缓存为整个 web 应用程序服务的,而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存。而本地缓存至缓存那些指定的缓存的页面

  2. 网页缓存不安全不可靠

    • 因为我们不知道在网站中到底缓存了哪些网页,以及缓存了网页上的哪些资源。而本地缓存可靠,我们可以控制对哪些内容进行缓存,
    • 不对哪些内容进行缓存,开发人员还可以利用编程的手段来控制缓存的更新,利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。
  3. (有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。

    • 但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。
    • 只会收到一条错误信息。而使用离线 web 应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。

如何实现 HTML5 应用程序缓存?

  • 如何实现 HTML5 应用程序缓存?
  • 什么是 manifest 文件,
  • 在文件中制定什么内容需要进行本地缓存,哪些内容不需要?

实现 HTML5 应用程序缓存非常简单,只需三步,并且不需要任何 API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。

  • 创建一个 cache.manifest 文件,并确保文件具有正确的内容。
  • 在服务器上设置内容类型。
  • 所有的 HTML 文件都指向 cache.manifest

Chrome 存储的地方

可以通过 chrome://appcache-internals/

扩展阅读

更多面试题

如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。

面试题
HTML CSS JavaScript
jQuery Vue.js React
算法 HTTP Babel
BootStrap Electron Gulp
Node.js 前端经验相关 前端综合
Webpack 微信小程序 -

这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了