面筋系列-http-前端缓存
2020/3/15 11:01:48
本文主要是介绍面筋系列-http-前端缓存,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前端缓存
先简单介绍一下现有的前端缓存技术方案,主要分为http缓存和浏览器缓存。
http缓存
http缓存都是第二次请求时开始的,这也是个老生常谈的话题了。无非也是那几个http头的问题:
Expires
HTTP1.0的内容,服务器使用Expires头来告诉Web客户端它可以使用当前副本,直到指定的时间为止。
Cache-Control
HTTP1.1引入了Cathe-Control,它使用max-age指定资源被缓存多久,主要是解决了Expires一个重大的缺陷,就是它设置的是一个固定的时间点,客户端时间和服务端时间可能有误差。
- 所以一般会把两个头都带上,这种缓存称为强缓存,表现形式为:
Last-Modified / If-Modified-Since
Last-Modified是服务器告诉浏览器该资源的最后修改时间,If-Modified-Since是请求头带上的,上次服务器给自己的该资源的最后修改时间。然后服务器拿去对比。
-
若资源的最后修改时间大于If-Modified-Since,说明资源又被改动过,则响应整片资源内容,返回状态码200;
-
若资源的最后修改时间小于或等于If-Modified-Since,说明资源无新修改,则响应HTTP 304,告知浏览器继续使用当前版本。
Etag / If-None-Match
前面提到由文件的修改时间来判断文件是否改动,还是会带来一定的误差,比如注释等无关紧要的修改等。所以推出了新的方式。
- Etag是由服务端特定算法生成的该文件的唯一标识,而请求头把返回的Etag值通过If-None-Match再带给服务端,服务端通过比对从而决定是否响应新内容。这也是304缓存。
浏览器缓存
-
storage 简单的缓存方式有cookie,localStorage和sessionStorage。这里就不详细介绍他们的区别了,这里说下通过localStorage来缓存静态资源的优化方案。
-
localStorage通常有5MB的存储空间,我们以微信文章页为例。
查看请求发现,基本没有js和css的请求,因为它把全部的不需要改动的资源都放到了localStorage中:
所以微信的文章页加载非常的快。
service workers
- 先看看兼容性: www.caniuse.com/#search=ser…
基本使用
- 基本架构和生命周期
通常遵循以下基本步骤来使用 service workers:
- service worker URL 通过 serviceWorkerContainer.register() 来获取和注册。
- 如果注册成功,service worker 就在 ServiceWorkerGlobalScope 环境中运行; 这是一个特殊类型的 woker 上下文运行环境,与主运行线程(执行脚本)相独立,同时也没有访问 DOM 的能力。
- service worker 现在可以处理事件了。
- 受 service worker 控制的页面打开后会尝试去安装 service worker。最先发送给 service worker 的事件是安装事件(在这个事件里可以开始进行填充 IndexDB和缓存站点资源)。这个流程同原生 APP 或者 Firefox OS APP 是一样的 — 让所有资源可离线访问。
- 当 oninstall 事件的处理程序执行完毕后,可以认为 service worker 安装完成了。
- 下一步是激活。当 service worker 安装完成后,会接收到一个激活事件(activate event)。 onactivate 主要用途是清理先前版本的service worker 脚本中使用的资源。
- Service Worker 现在可以控制页面了,但仅是在 register() 成功后的打开的页面。也就是说,页面起始于有没有 service worker ,且在页面的接下来生命周期内维持这个状态。所以,页面不得不重新加载以让 service worker 获得完全的控制。
下图展示了 service worker 所有支持的事件:
调试方法
一个网站是否启用Service Worker,可以通过开发者工具中的Application来查看:
具体使用
- 使用前,浏览器支持,https 支持
- 按照上面的生命周期完成整个流程 developer.mozilla.org/zh-CN/docs/…
参考
- google developer: developers.google.com/web/ilt/pwa…
- mdn: developer.mozilla.org/zh-CN/docs/…
- sw DEMO:github.com/mdn/sw-test
- csdn:blog.csdn.net/mevicky/art…
- workbox(sw 的工具): developers.google.com/web/tools/w…
拓展阅读
这篇关于面筋系列-http-前端缓存的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)