从输入URL到页面加载的过程？由一道题完善自己的前端知识体系！

• 出处：http://mp.weixin.qq.com/s/qMsf4DcMhn2cf0fXC-PLVA

• 强缓存与弱缓存
  缓存可以简单的划分成两种类型： 强缓存（ 200fromcache）与 协商缓存（ 304）。
  区别简述如下：

1. 强缓存（ 200fromcache）时，浏览器如果判断本地缓存未过期，就直接使用，无需发起http请求。
   协商缓存（ 304）时，浏览器会向服务端发起http请求，然后服务端告诉浏览器文件未改变，让浏览器使用本地缓存。
2. 对于协商缓存，使用 Ctrl+F5强制刷新可以使得缓存无效。但是对于强缓存，在未过期时，必须更新资源路径才能发起新的请求（更改了路径相当于是另一个资源了，这也是前端工程化中常用到的技巧）。

• 上述提到了强缓存和协商缓存，那它们是怎么区分的呢？答案是通过不同的http头部控制。

先看下这几个头部：

If

None

Match
/
E

tag
、
If

Modified

Since
/
Last

Modified
、
Cache

Control
/
Max

Age
、
Pragma
/
Expires
这些就是缓存中常用到的头部，这里不展开。仅列举下大致使用。

属于强缓存控制的：

（
http1
.
1
）
Cache

Control
/
Max

Age
（
http1
.
0
）
Pragma
/
Expires
注意： Max-Age不是一个头部，它是 Cache-Control头部的值。

属于协商缓存控制的：

（
http1
.
1
）
If

None

Match
/
E

tag
（
http1
.
0
）
If

Modified

Since
/
Last

Modified
可以看到，上述有提到 http1.1和 http1.0，这些不同的头部是属于不同http时期的。

再提一点，其实HTML页面中也有一个meta标签可以控制缓存方案- Pragma。

<META

HTTP-EQUIV

"Pragma"

CONTENT

"no-cache"

不过，这种方案还是比较少用到，因为支持情况不佳，譬如缓存代理服务器肯定不支持，所以不推荐。