关于前端:前端缓存机制

一.前端缓存概述

前端缓存技术是进步前端性能,升高服务端压力的关键技术。前端缓存技术分为“强制缓存”与“协商缓存”;两种缓存的相同点是命中后在内容都是从浏览器的缓存中取数据,不同点是“强制缓存”的命中与否判断是浏览器依据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?__…

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据