前端缓存机制

一.前端缓存概述

前端缓存技术是提高前端性能,降低服务端压力的关键技术。前端缓存技术分为“强制缓存”与“协商缓存”;两种缓存的相同点是命中后在内容都是从浏览器的缓存中取数据,不同点是“强制缓存”的命中与否判断是浏览器根据Expires字段或Cache-control字段自行判断的,而“协商缓存”是浏览器每次请求都将If-modified-since字段或If-No-Match字段带入协议头并发送到服务端,由服务端判断浏览器缓存的资源是否有变化,如无变化就返回304(no-modified)。

二.强制缓存

在http 1.0 阶段使用Expires字段来标识强制缓存, 浏览器第一次向服务端请求资源后,服务端在返回头中携带Expires字段来标识资源最终的过期时间,如:Expires:Thu, 31 Dec 2037 23:55:55 GMT。浏览器第二次请求该资源时,浏览器会先从缓存中寻找该资源,发现该资源未过期就直接加载该资源,不再向服务端发送请求。这个字段的弊端是,服务端的GMT时间与浏览器的时间比一定匹配,当修改浏览器的时间后就会造成缓存命中异常。

`Cache-Control `在http 1.1 后引入,用来补充Expires字段的不足。浏览器第一次向服务请求资源后,服务端会在返回头中带入Cache-Control字段,控制浏览器的缓存,Cache-Control字段的取值有no-store(不缓存),no-cache(每次询问),max-age: 120(资源过期时间120s)。在浏览器第二次请求该资源时,首先会从缓存中寻找该资源,找到后会结合资源上次的请求返回时间+max-age来判断资源是否过期,不过期直接使用,如果过期就继续向服务端请求资源,服务端接到请求后会将资源返回并携带新的max-age。

强制缓存主要用于静态资源,因为强制缓存命中逻辑全部在浏览器,当动态资源(html、js、css)有变动后,无法主动使浏览器更新文件。

三.协商缓存

当浏览器没有命中强制缓存后,浏览器会向服务端发送请求验证协商缓存。服务端验证资源命中协商缓存后会返回304(Not Modified)并不返回资源的内容,浏览器此时会更新缓存状态并使用缓存中的资源。
协商缓存使用两个字段标识:Etag和Last-Modified。
1. Etag是服务端在响应头中所带,值是一段浏览器无法识别的字符串,在浏览器第二次请求资源时将这个的值以If-No-Match字段带入请求头,服务端接到If-No-Match值与资源新生成的Etag值进行对比,如果资源无变化就返回304(Not Modified),如果有变化就返回新的资源和新的Etag。
2. Last-Modified是服务端随资源返回,Last-Modified是一个服务端的GTM值,浏览器二次请求资源时将此字段的值以If-Modified-Since字段带回给服务端,服务端拿到这个值后对边资源的变更时间,如果相同就说明资源无变化,返回304(Not Modified);如果不同就返回新的资源和对应资源的Last-Modified值。

参考:https://mp.weixin.qq.com/s?__...

你可能感兴趣的:(前端html5)