|
|
51CTO旗下网站
|
|
移动端

关于浏览器缓存,一次全部弄明白

平时生活当中缓存一集电视剧,下载一首歌;这些资源是可以直接离线观看的,没有去请求网络,资源在本地。

作者:妙堂传道者来源:申博太阳城|2018-11-28 14:01

什么是缓存

平时生活当中缓存一集电视剧,下载一首歌;这些资源是可以直接离线观看的,没有去请求网络,资源在本地。

浏览器中的缓存又是什么

如上所说,缓存即是离线的资源;对于浏览器开发者而言,缓存不是我们用浏览器下载了什么, 而是比如我们通过浏览器打开过一个网页,这个网页里面所包含的资源(图片、css文件、js文件等)在无感知的情况下,缓存在了本地。

浏览器中缓存的步骤是什么样的

我们知道浏览器会有缓存,那么是我们每次去打开之前已经打开过的网站,都是用的缓存吗?当然不是!!!浏览器有一套协议来管理什么时候需要去请求服务器,什么时候使用本地缓存;这套协议就叫做缓存协议(缓存机制)。

一起来看一下这套机制的流程是什么样的:

很随意的来解释一下这张图:

1.浏览器发出请求,检查本地是否有缓存;

2.如果有缓存,判断缓存是否过期;

3.如果过期,向服务器发送验证当前本地资源还是否可用,如果可用,返回状态码304,使用本地缓存。如果不可用,返回状态码200,并返回新资源,并把资源写入到缓存当中。

4.如果没有过期,直接载入缓存资源使用。

打开浏览器开发工具= >network;可以看到如下图:

  • 第一个资源是请求返回的新资源。
  • 第二个和第三个是读取内存当中的资源,耗费时间为0ms。
  • 后面几个是读取本地硬盘里面的缓存资源,读取硬盘比较慢,所以有时间花销,但总体是比请求网络快的多。

怎么判断是否有缓存

在第一次请求页面成功返回资源后,会记录的每一个缓存文件与其url的对应关系,存储在本地,下一次再请求的时候,或者浏览器打开之后,通过请求资源的url去匹配是否有对应的资源;来确认这个文件是否有缓存(此处并不能确认文件是否已经过期)。

怎么判断命中的缓存是否可用

通过上一步命中缓存资源之后,首先会查看缓存协议的里的相关配置字段(Cache-Control、Expires);查看当前缓存是否过期,是否还可用。

cache-control字段的含义

Expires字段

当两个字段都有的时候,会忽略掉Expires字段。

如果缓存资源不可用,怎么处理

根据配置,如果发现资源可用,终止请求,返回缓存资源;发现不可用时候,回发起网络请求,在发起网络请求的时候,回去查看是否存在Etag字段、Last-Modified字段;

1.如果没有发现相关字段,直接发起请求,返回相关资源,写入缓存当中;

2.如果发现了Etag、Last-Modified字段,附带上相应的字段内容,发起请求,服务端会根据你发起的字段内容做匹配,如果匹配成功,说明在客户端的缓存资源还是可用的,返回304。如果匹配失败,服务端会返回200,并携带上相应的资源文件。

那么Etag字段和Last-Modified字段又代表什么意思呢?他们的作用又是什么呢?

这两个字段是在资源返回的时候请求header头携带回来的。

Etag字段:表示请求资源在服务器的唯一标识,浏览器可以根据ETag值缓存数据,下次请求的时候以If-None-Match字段请求。

Etag

Last-Modified字段:用于标记请求资源的最后一次修改时间。请求的时候以If-Modified-Since字段请求。

Last-Modified

If-Modified-Since

全部过程解析

以下是http缓存可能涉及到的所有的字段:

若有不足,还望斧正!

【编辑推荐】

  1. 通过配置Apache 2以控制浏览器缓存
  2. 高并发系统中锁策略,缓存策略等解决思路
  3. 缓存服务的更新策略有哪些?
  4. MySQL:缓存算什么东西?!
  5. Memcache缓存系统原理
【责任编辑:武晓燕 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢
24H热文
一周话题
本月最赞

订阅专栏+更多

活学活用 Ubuntu Server

活学活用 Ubuntu Server

实战直通车
共35章 | UbuntuServer

218人订阅学习

Java EE速成指南

Java EE速成指南

掌握Java核心
共30章 | 51CTO王波

83人订阅学习

Mysql DBA修炼之路

Mysql DBA修炼之路

MySQL入门到高阶
共24章 | 武凤涛

471人订阅学习

读 书 +更多

2006软考上半年试题分析与解答

本书是针对全国计算机技术与软件专业技术资格(水平)考试而编写的,书中详尽分析与解答了2006年上半年的程序员级、软件设计师级、软件评测...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客

申博太阳城
网站地图 申博游戏手机下载 澳门赌场 澳门新葡京赌场 777老虎机游戏登入
菲律宾申博真人娱乐 太阳城申博娱乐官网 申博官网网址登入 申博开户优惠
申博娱乐手机版 申博游戏网址 菲律宾申博开户 现金网百家乐
申博电子游戏 太阳城亚洲注册 申博棋牌游戏 咪牌百家乐
ag娱乐登入 申博娱乐手机登入 澳门金沙娱乐场 太阳城申博官网