浏览器缓存机制精简讲解

shenhualong 发布于2019-08-05 12:40 / 2807人阅读

摘要：一认识浏览器缓存浏览器缓存分为强缓存和协商缓存。浏览器接收资源，把资源和相应头缓存下来。协商缓存当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回，浏览器从缓存中加载。

一、认识浏览器缓存

浏览器缓存分为：强缓存和协商缓存。
1、强缓存：浏览器加载资源时，第一步先判断它是否是强缓存，如果是，浏览器将直接从自己的缓存中读取，不会向服务器发送请求。 Alt text
上图，status200，Size是from memory cache就是走的强缓存。那么什么是强缓存呢？浏览器又是咋判断的呢？

Expires字段：1、浏览器第一次向服务器请求，服务器返回资源并在response header加上Expires字段，是客户端缓存有效期，是绝对时间。2、浏览器接收资源，把资源和相应头缓存起来。3、待到再次请求这个资源时，先在缓存中找，找到了看Expires字段，判断是否过期。若没过期直接从缓存加载。若过期了，再向服务器请求。

但是绝对时间有时会有偏差，所以引出了Cache-Control。

Cache-Control字段：1、浏览器第一次向服务器请求，服务器返回资源并在response header加上Cache-Control字段，也是缓存的有效期，但是是相对时间，比如：Cache-Control:max-age=56700000。2、浏览器接收资源，把资源和相应头缓存下来。3、待到浏览器再次请求这个资源时，先在缓存找，根据第一次的请求时间和Cache-Control相对时间算出过期时间。若没过期，直接从缓存加载。若过期了，再向服务器请求。

Cache-Control弥补了Expires的不足，更安全有效。

2、协商缓存：当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回304Not Modified，浏览器从缓存中加载。那什么又是协商缓存呢？

Last-Modified和If-Modified-Since字段：1、浏览器第一次向服务器发请求，服务器返回资源并在response header加上Last-Modified字段，表示资源最后修改的时间。2、浏览器再次请求这个资源时，请求头会加上If-Modified-Since字段。若这两个字段一样，说明资源没有修改过，返回304Not Modified，浏览器从缓存中获取资源。若这两个字段不一样，说明资源修改过，服务器正常返回资源。

但有时候服务器上资源有变化，单最后修改时间没更新，则引出下面两个字段。

ETag、If-None-Match：1、浏览器第一次向服务器请求，服务器返回资源并在response header上加ETag字段。表示资源本身，资源有变化，则该字段有变化。2、浏览器再次向服务器请求这个资源时，请求头携带If-None-Match字段。若这两个字段相同，则代表资源没有变化，服务器返回304Not Modified，浏览器从缓存中加载。若两个字段不同，证明资源有变动，服务器正常返回资源。

idc机房托管混合云三级缓存机制 cdn缓存机制 php缓存机制 android缓存机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57012.html

浏览器缓存机制精简讲解

摘要：一认识浏览器缓存浏览器缓存分为强缓存和协商缓存。浏览器接收资源，把资源和相应头缓存下来。协商缓存当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回，浏览器从缓存中加载。一、认识浏览器缓存浏览器缓存分为：强缓存和协商缓存。1、强缓存：浏览器加载资源时，第一步先判断它是否是强缓存，如果是，浏览器将直接从自己的缓存中读取，不会向服务器发送请求。上图，s...

dmlllll 2019-08-01 18:18 评论0 收藏0
浏览器缓存机制精简讲解

摘要：一认识浏览器缓存浏览器缓存分为强缓存和协商缓存。浏览器接收资源，把资源和相应头缓存下来。协商缓存当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回，浏览器从缓存中加载。一、认识浏览器缓存浏览器缓存分为：强缓存和协商缓存。1、强缓存：浏览器加载资源时，第一步先判断它是否是强缓存，如果是，浏览器将直接从自己的缓存中读取，不会向服务器发送请求。上图，s...

superPershing 2019-08-21 18:26 评论0 收藏0
提高前端性能的黄金法则

摘要：虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要数据显示只有的最终用户响应时间花在了下载文档上。前端性能优化一味奉行最佳实践有时候反而过而不及，所以针对项目的实际情况来优化才是明智的选择。前端近几年变化很大，各种工具，库，框架并发。虽然如此，但是网站前端性能优化的思路基本没变。为什么前端性能如此重要？数据显示: 只有 10%~20% 的最终用户响应时间花在了下载...

keithyau 2019-08-19 17:54 评论0 收藏0
前端基础

摘要：谈起闭包，它可是两个核心技术之一异步基于打造前端持续集成开发环境本文将以一个标准的项目为例，完全抛弃传统的前端项目开发部署方式，基于容器技术打造一个精简的前端持续集成的开发环境。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日...

graf 2019-08-21 18:38 评论0 收藏0
雅虎网站性能优化的34条军规！

摘要：减少页面的请求次数是你优化网站性能首先要做的一步，这是改进首次访问用户等待时间的最重要的方法。连接新网站和旧网站是跳转功能经常被用到的另一种情况。为了提高性能，优化响应是很重要的。 1、尽量减少HTTP请求次数终端用户响应的时间中，有80%用于下载各项内容，这部分时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素可以减少HTTP请求的次数，这是提高网页速度的关键...

Carson 2019-08-05 18:07 评论0 收藏0