本篇博客转载自github,原文地址:浏览器缓存篇

前言

在前端开发中,缓存有利于加快网页的加载速度,同时缓存能够被反复利用,所以可以减少流量和带宽的开销。

缓存的分类有很多种,CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。

本篇讲解一下Web开发中的浏览器缓存。这个在实际开发环境中往往也会被问到,或者使用到。如何去准确认清楚缓存的概念,是前端必须要去学习的。

正文

浏览器的缓存问题,主要指的是http的缓存——即协议层。而h5新增的storage和数据库缓存,那是应用层缓存,并不被计入本篇的分析内容里面。下面我们正式开始来进行缓存的分析。

协议层的缓存,其实,可以被分成强制缓存和对比缓存。

1、强制缓存

首先,我们先来看一张强制缓存时的时序图,来了解一下强制缓存在不同情况下的请求模式:

从图中,我们不难看出,只有当缓存失效时,才会去服务器获取最新资源的方式,就是强制缓存。而在协议层的字段中,可以造成强制缓存的字段有两个Expires和Cache-Control。

1.0的时候见到我——Expires

最早使用的是Expires字段,该字段表示缓存到期时间,即有效时间+当时服务器的时间,然后将这个时间设置在header中返回给服务器。因此,该时间是一个绝对时间,举例说明:

Expires: Thu, 10 Nov 2017 08:45:11 GMT

图片示例:

在响应消息头中,设置这个字段之后,就可以告诉浏览器,在未过期之前不需要再次请求。

但是,这个字段设置时有缺点:

由于是绝对时间,用户可能会将客户端本地的时间进行修改,而导致浏览器判断缓存失效,重新请求该资源,同时,还导致客户端与服务端的时间不一致,致使缓存失效。

1.1的时候我来了——Cache-Control

已知Expires的缺点之后,在HTTP/1.1中,增加了一个字段Cache-Control,该字段表示资源缓存的最大有效时间,在该时间内,客户端不需要向服务器发送请求

这两者的区别就是前者是绝对时间,而后者是相对时间。我们不妨举个例子来说明一下:

Cache-Control: max-age=2592000

图片示例:

下面列举一下Cache-Control的字段可以带的值:

①、max-age:即最大有效时间,在上面的例子中我们可以看到

②、no-cache:表示没有缓存,即告诉浏览器该资源并没有设置缓存

③、s-maxage:同max-age,但是仅用于共享缓存,如CDN缓存

④、public:多用户共享缓存,默认设置

⑤、private:不能够多用户共享,HTTP认证之后,字段会自动转换成private。

总结:自从http1.1开始,Expires逐渐被Cache-Control取代。

Cache-Control是一个相对时间,即使客户端时间发生改变,相对时间也不会随之改变,这样可以保持服务器和客户端的时间一致性。而且Cache-Control的可配置性比较强大。

2、对比缓存

扯完强制缓存,我们来看看对比缓存。在解释这个之前,是否可以先猜想一下,强制缓存是,缓存在未过有效期时,不需要请求资源。那么,对比缓存的原理又该如何呢?

废话不多说,我们也先从对比缓存的时序图讲起,如图:

对比缓存的过程是,先从缓存中获取对应的数据标识,然后向服务器发送请求,确认数据是否更新,如果更新,则返回新数据和新缓存;反之,则返回304状态码,告知客户端缓存未更新,可继续使用。

这正好弥补了一些强制缓存的缺陷。对比缓存主要应用于一些时常需要动态更新的资源文件。

对比缓存在协议里的字段是Last-Modified和If-Modified-Since。

别人的好伙伴——Last-Modified

Last-Modified:服务器告知客户端,资源最后一次被修改的时间,例如

Last-Modified: Thu, 10 Nov 2015 08:45:11 GMT

If-Modified-Since:再次请求时,请求头中带有该字段,服务器会将If-Modified-Since的值与Last-Modified字段进行对比,如果相等,则表示未修改,响应304;

反之,则表示修改了,响应200状态码,返回数据;这个字段可以和Cache-Control配合使用。

但是它还是有一定缺陷的:

①、如果资源更新的速度是秒以下单位,那么该缓存是不能被使用的,因为它的时间单位最低是秒。

②、如果文件是通过服务器动态生成的,那么该方法的更新时间永远是生成的时间,尽管文件可能没有变化,所以起不到缓存的作用。

我来完善它——Etag

由于Last-modified还是存在缺陷的,尽管大多数情况下,会使用它,但当遇到我们上面所说的场景时,我们可能就需要了解一下,我们另一个小伙伴了——Etag。

Etag存储的是文件的特殊标识(一般都是hash生成的),服务器存储着文件的Etag字段,可以在与每次客户端传送If-no-match的字段进行比较,如果相等,则表示未修改,响应304;

反之,则表示已修改,响应200状态码,返回数据。

最后,通过一张原理图,我们来加深一下记忆:

至此为止,两种缓存类型的缓存方式已经阐述完成了,不知你是否已经心中已经有个大致的印象,当别人问起时,你可以对答如流。希望我们一同进步吧,fighting。

3、浏览器行为引起的不同

最后,我们来聊聊浏览器行为会引起缓存的变化吧。

下面说一下浏览器的行为会产生怎样的请求:

①、刷新网页 => 如果缓存没有失效,浏览器会直接使用缓存;反之,则向服务器请求数据

②、手动刷新(F5) => 浏览器会认为缓存失效,在请求服务器时加上Cache-Control: max-age=0字段,然后询问服务器数据是否更新。

③、强制刷新(Ctrl + F5) => 浏览器会直接忽略缓存,在请求服务器时加上Cache-Control: no-cache字段,然后重新向服务器拉取文件。

4、移动端的缓存处理

在PC端或许这样子的缓存机制就已经足够了,因为PC端不需要为网络的问题担心。

但是,移动端却不行,任何一个网络请求的增加,对于移动端的加载消耗时间都是比较大的(谁叫移动端的网太差呢,3G、2G)。那么,上述的缓存有什么问题呢?

其实,强制缓存是没有太大问题的,因为只要缓存不到期,是不会想服务器发送请求的;但是如果是对比缓存的情况下,304的问题就比较巨大,因为它会造成无用的请求。

每次在使用缓存前,都会向服务器发送请求确认,导致网络的延时。

一次完美的缓存必须保证两点:

①、数据缓存之后,尽量减少服务器的请求

②、如果资源更新的话,必须使得客户端的资源一起更新。

所以,一般我们会运用的方式是:

在资源文件后面加上表示,如config.f1ec3.js、config.v1.js之类的,然后给资源设置较长的缓存时间,如一年;

Cache-Control: max-age=31536000

这样子,就不会造成304的回包现象。

然后一旦资源发生更新时,我们可以改变资源后面的标识符,实现静态资源非覆盖式更新。

总结

本篇大致分析了浏览器缓存部分的分类情况,以及细化分析。主要可分为:

1、强制缓存

~Expires字段

~Cache-Control字段

2、对比缓存

~Last-Modefied字段

~Etag标识

3、浏览器行为引起的缓存变化

4、移动端的缓存策略

<转>浏览器缓存机制的更多相关文章

  1. Java缓存学习之二:浏览器缓存机制

    浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存 ...

  2. 详解浏览器缓存机制与Apache设置缓存

    一.详解浏览器缓存机制 对于,如何说明缓存机制,在网络上找到了两张图,个人认为思路是比较清晰的.总结时,上图. 这里需要注意的有两点: 1.Last-Modified.Etag是响应头里的数据 2.I ...

  3. atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结

    atitit.浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结 1. 缓存的一些机制 1 1.1. http 304 1 1.2. 浏览器刷新的处理机制 1 1.3. Expir ...

  4. 浏览器缓存机制<转>

    转这篇文章是感觉可以在图片加载的时候,也使用这样的缓存策略   作者:吴秦出处:http://www.cnblogs.com/skynet/本文基于署名 2.5 中国大陆许可协议发布,欢迎转载,演绎或 ...

  5. WEB请求过程(http解析,浏览器缓存机制,域名解析,cdn分发)

    概述 发起一个http请求的过程就是建立一个socket通信的过程. 我们可以模仿浏览器发起http请求,譬如用httpclient工具包,curl命令等方式. curl "http://w ...

  6. HTTP浏览器缓存机制

    来自:http://kb.cnblogs.com/page/165307/ 浏览器缓存机制 浏览器缓存机制,其实主要就是HTTP协议定义的缓存机制(如: Expires: Cache-control等 ...

  7. HTTP 协议 -- 浏览器缓存机制

    浏览器缓存机制 浏览器缓存机制主要是 HTTP 协议定义的缓存机制. HTTP 协议中有关缓存的缓存信息头的关键字有 Cache-Control,Pragma,Expires,Last-Modifie ...

  8. 浏览器缓存机制介绍 + 常用 http 状态码

    浏览器缓存分为两种, 强制缓存  与  协商缓存, https://www.pass4lead.com/300-209.htmlhttps://www.pass4lead.com/300-320.ht ...

  9. http报文和浏览器缓存机制

    目录 1. 请求报文 1.1请求行 1.2 请求头 一些常用的请求头信息 2. 响应报文 2.1 状态行 1> 响应状态码 2> 常见的响应状态码 2.2 响应头 3. 浏览器缓存 3.1 ...

随机推荐

  1. Linux常用基本命令:三剑客命令之-awk 三元表达式

    awk 3元表达式,if...else结构都可以用3元表达式改写 ghostwu@dev:~/linux/awk$ awk -v FS=":" '{ type=$3>=100 ...

  2. Vue遇到的一些小坑

    1.在使用v-html指令时,发现添加的元素不能设置样式 解决方案:在添加样式时使用>>>就可以添加成功 例如:<div v-html="<img src=&q ...

  3. 【代码笔记】Web-HTML-CSS

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. 消除2个按钮之间1px细节引起的冲突

    1.代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF- ...

  5. Android 高德地图定位

    创建Key 打开高德开发平台 → 我的应用 → 创建应用 → 创建新Key 说明: 1.发布版安全码获取:用自己的签名打包成apk安装软件,用SHA1工具查看 2.调试版安全码获取: 直接运行安装软件 ...

  6. json替换jsonp实现跨域请求

    最近遇到h5前端页面和web后端双方的请求存在跨域,普通的jquery.ajax请求已不能实现(因为js是不允许跨域的(如果可以跨域,那就能随便改别人的网页了),js的原理), 最后经过艰苦奋斗,终于 ...

  7. 洗礼灵魂,修炼python(14)--模块decimal, fractions,operator,collections以及精度介绍

    decimal 1.作用: 用于浮点数计算.相比内置的二进制浮点数实现 float这个类型有助于 金融应用和其它需要精确十进制表达的场合,控制精度,控制舍入以适应法律或者规定要求,确保十进制数位精度, ...

  8. sqlserver 将 “用 特定字符 分隔的一个字段” 拆分成多个字段,然后两个表之间数据更新

    将源TXT文件sourceFile_table.txt导入数据库,生成新表dbo.sourceFile_table.新增字段lon.lat.shi.xian 源表dbo.sourceFile_tabl ...

  9. npm install node-sass 本地安装失败

    $ npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taob ...

  10. owncloud 实现私有云进行多端文件同步

    研究生生涯开始了,事情逐渐多了起来.都没时间写博客了... 开学实验室配了台电脑,我把主机装上了Fedora 作为我的服务器.平时有些实验室的材料,经常几个电脑一起看,使用U盘拷来拷去很是麻烦.今天重 ...