前端必须要懂的浏览器缓存机制

1. 什么是浏览器缓存？

指定设置缓存最大年夜的有效时光，定义的是时光长短。当浏览器向办事器发送请求后，在max-age这段时光里浏览器就不会再向办事器发送请求了。

public

浏览器平日会将常用资本缓存在你的小我电脑的磁盘和内存中。如Chrome浏览器的缓存存放地位就在： \Users\Your_Account\AppData\Local\Google\Chrome\User Data\Default 中的 Cache文件夹和 Media Cache 文件夹中。

2. 什么是静态资本办事器？

3. 浏览器请求静态资本的流程

在一般的网站中，静态资本应用频率高，流量占用大年夜。对于拜访量稍大年夜的网站，都邑把静态资本放置到 CDN 办事器，不占用营业办事器的收集带宽，而达到更好的用户体验。

4. 浏览器端缓存的分类

下面这张图展示了某一网站，对不合伙源的请求结不雅，个中可以看到有的资本直接大年夜缓存中攫取，有的资本跟办事器进行了再验证，有的资本从新大年夜办事器端获取。

200 from cache
304 not modified

留意，我们评论辩论的所有关于缓存资本的问题，都仅仅针对 GET 请求。而对于 POST , DELETE , PUT 这类行动性操作平日不做任何缓存。

5. Cache-Control和Expires

Cache-Control是HTTP1.1中新增的响应头
Expires是HTTP1.0中的响应头
Cache-Control应用的是相对时光
Expires指定的是具体的过时日期而不是秒数。因为很多办事器跟客户端存在时钟不一致的情况，所以最好照样应用Cache-Control.
Cache-Control和Expires同时应用的话，Cache-Control会覆盖Expires

6. Cache-Control都可以设置哪些属性

max-age（单位为s）

对于前端开辟者来说，我们重要跟浏览器中的缓存打交道，上图流程是简化版的;事实上在实际应用中平日采取静态资本办事器（CDN）。

指定响应可以在代劳缓存中被缓存，于是可以被多用户共享。如不雅没有明白指定private，则默认为public。

private

响应只能在私有缓存中被缓存，不克不及放在代劳缓存上。对一些用户信息敏感的资本，平日须要设置为private。

no-cache

绝对禁止缓存任何资本，也就是说每次用户请求资本时，都邑向办事器发送一个请求，每次都邑下载完全的资本。平日用于机密性资本。

当在5秒内第二次拜访页面时，浏览器会直接大年夜缓存中取得资本

关于Cache-Control的应用，见下面这张图

7.新鲜度限值

HTTP经由过程缓存将办事器资本的副本保存一段时光，这段时光称为新鲜度限值。这在一段时光内请求雷同资本不会再经由过程办事器。HTTP协定中Cache-Control 和 Expires可以用来设置新鲜度的限值，前者是HTTP1.1中新增的响应头，后者是HTTP1.0中的响应头。二者所做的事时都是雷同的，但因为Cache-Control应用的是相对时光，而Expires可能存在客户端与办事器端时光不一样的问题，所以我们更偏向于选择Cache-Control。

html代码

<html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />    <title>Web Cache</title>    <link rel="shortcut icon" href=http://news.51cto.com/art/201709/"./shortcut.png">

node办事端代码

var http = require('http');var fs = require('fs');http.createServer(function(req, res) {    if (req.url === '/' || req.url === '' || req.url === '/index.html') {        fs.readFile('./index.html', function(err, file) {            console.log(req.url)            //对主文档设置缓存，无效不雅            res.setHeader('Cache-Control', "no-cache, max-age=" + 5);            res.setHeader('Content-Type', 'text/html');            res.writeHead('200', "OK");            res.end(file);        });    }    if (req.url === '/cache.png') {        fs.readFile('./cache.png', function(err, file) {            res.setHeader('Cache-Control', "max-age=" + 5);//缓存五秒            res.setHeader('Content-Type', 'images/png');            res.writeHead('200', "Not Modified");            res.end(file);        });    }    }).listen(8888);

8.办事器再验证

浏览器或代劳缓存中缓存的资本过时了，并不料味着它和原始办事器上的资本竽暌剐实际的差别，仅仅意味着到了要进行查对的时光了。这种情况被称为办事器再验证。

1/3 1 2 3 下一页尾页

　　推荐阅读

　　10 个最终编译成 JavaScript 的脚本语言

与简单的网站比拟，现代应用法度榜样有更多不合的需求。然则，浏览器是一个拥有（大年夜部分）固定技巧的平台，并且JavaScript仍然是web应用法度榜样的核心说话；须要在浏览器中运行的任>>>详细阅读

本文标题：前端必须要懂的浏览器缓存机制

地址：http://www.17bianji.com/lsqh/37665.html

1/2 1