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 应用程序的本地缓存与浏览器的网页缓存有许多方面都存在着明显的区别。
-
本地缓存为整个 web 应用程序服务的,而浏览器的网页缓存只服务于单个网页。任何网页都具有网页缓存。而本地缓存至缓存那些指定的缓存的页面
-
网页缓存不安全不可靠
- 因为我们不知道在网站中到底缓存了哪些网页,以及缓存了网页上的哪些资源。而本地缓存可靠,我们可以控制对哪些内容进行缓存,
- 不对哪些内容进行缓存,开发人员还可以利用编程的手段来控制缓存的更新,利用缓存对象的各种属性、状态和事件来开发出更加强大的离线应用程序。
-
(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度。
- 但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接。如果网络没有连接,即使浏览器启用了对一个站点的缓存,依然无法打开这个站点。
- 只会收到一条错误信息。而使用离线 web 应用,我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件,并且在网络离线状态下依然能够访问这个网站。
如何实现 HTML5 应用程序缓存?
- 如何实现 HTML5 应用程序缓存?
- 什么是 manifest 文件,
- 在文件中制定什么内容需要进行本地缓存,哪些内容不需要?
实现 HTML5 应用程序缓存非常简单,只需三步,并且不需要任何 API。只需要告诉浏览器需要离线缓存的文件,并对服务器和网页做一些简单的设置即可实现。
- 创建一个 cache.manifest 文件,并确保文件具有正确的内容。
- 在服务器上设置内容类型。
- 所有的 HTML 文件都指向 cache.manifest
Chrome 存储的地方
可以通过 chrome://appcache-internals/
扩展阅读
- https://www.axihe.com/edu/html5/api/app-cache.html
- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Using_the_application_cache
- https://blog.csdn.net/u013084331/article/details/51133052
- http://www.alloyteam.com/2019/07/web-applications-offline/
- https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers
更多面试题
如果你想了解更多的前端面试题,可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题,也有一些大公司的面试图,可以让你面试更加顺利。
面试题 | ||
---|---|---|
HTML | CSS | JavaScript |
jQuery | Vue.js | React |
算法 | HTTP | Babel |
BootStrap | Electron | Gulp |
Node.js | 前端经验相关 | 前端综合 |
Webpack | 微信小程序 | - |
这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!