13

今天在做项目的优化的时候,使用chrome开发者工具的network发现了细节:

image

虽然这两个看起来都是从缓存中读取,但还是有一些不一样的!

webkit资源的分类

webkit的资源分类主要分为两大类:主资源和派生资源

http状态码

200 from memory cache

不访问服务器,直接读缓存,从内存中读取缓存。此时的数据时缓存到内存中的,当kill进程后,也就是浏览器关闭以后,数据将不存在。

但是这种方式只能缓存派生资源。

200 from disk cache

不访问服务器,直接读缓存,从磁盘中读取缓存,当kill进程时,数据还是存在。

这种方式也只能缓存派生资源

304 Not Modified

访问服务器,发现数据没有
更新,服务器返回此状态码。然后从缓存中读取数据。

但是这里有困惑,怎么判断from memory cache还是304

三级缓存原理

  1. 先去内存看,如果有,直接加载
  2. 如果内存没有,择取硬盘获取,如果有直接加载
  3. 如果硬盘也没有,那么就进行网络请求
  4. 加载到的资源缓存到硬盘和内存

所以我们可以来解释这个现象

图片为例:

访问-> 200 -> 退出浏览器
再进来-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

http header

max-age

web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间)

Expires

Expires指定的时间根据服务器配置可能有两种:

  1. 文件最后访问时间
  2. 文件绝对修改时间

如果max-age和Expires同时存在,则被Cache-Control的max-age覆盖

last-modified

WEB 服务器认为对象的最后修改时间,比如文件的最后修改时间,动态页面的最后产生时间

ETag

对象(比如URL)的标志值,就一个对象而言,文件被修改,Etag也会修改

Cache-Control

简单理解,强缓存

最后结论

见图片(来源自网络)
image


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

10 条评论
xupeng_zzz · 2017年11月17日

补充一个新的缓存控制项Cache-Control: immutable。如果没有超过时间上的过期失效时间,那么服务器端该页面内容将不会改变,这样浏览器就不应该再发送有条件的重新验证请求。immutable可以节省数百个HTTP请求,提供动态HTML的加载时间,服务器不必再处理304响应。https://www.cnblogs.com/ziyun...

+1 回复

0

涨知识了 多谢

NikoManiac 作者 · 2017年11月19日
0

@Niko_lan 但是什么时候缓存到memory cache,什么时候缓存到disk cache没搞懂,你知道吗?

xupeng_zzz · 2017年11月20日
0

@xupeng_zzz
主要决定因素是看浏览器内存空闲情况,如果内存使用率很低就优先放入内存,反之则放入磁盘。对于一些大的文件,浏览器还是放在了磁盘内存里,因为大文件太占内存空间。

hpaicf · 2018年07月25日
米女巫 · 2017年11月21日

在360浏览器(极速模式),暴力刷新时,network下的Status会变成(canceled),然后整个页面就不能操作了,这个Status为什么会变成(canceled)

回复

AbigaleYPC · 2018年04月26日

主资源 和 派生资源 ,请问其中的主资源是什么呢

回复

0

主资源,比如HTML页面,或者下载项,派生资源,比如HTML页面中内嵌的图片或者脚本链接

luxi · 2018年06月14日
wang · 2018年08月28日

刷新页面走的强缓存(from disk cache))

回复

JackieZhang · 3月7日

请问vue项目每次打包发版之后,从浏览器进来输入地址访问 请求到的资源是 from disk cache 是 旧资源,需要刷新一下。请问怎么样可以保证发版之后从浏览器进来输入地址访问到最新资源?谢谢

回复

0

需要更新的静态资源,构建之后不会加上新的版本号吗?

長风 · 3月28日
载入中...