浏览器缓存问题原理以及解决方案
浏览器缓存问题:
简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js,数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。
为什么使用缓存:
(1)减少网络带宽消耗
(2)降低服务器压力
(3)减少网络延迟,加快页面打开速度
浏览器端的缓存规则:
新鲜度(过期机制):也就是缓存副本有效期。
校验值(验证机制):资源的实体标签Etag(EntityTag)
举个栗子
解决方法:
(1)使用HTMLMeta标签
Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下
<metahttp-equiv="Pragma"content="no-cache">
事实上这种禁用缓存的形式用处很有限:
a.仅有IE才能识别这段meta标签含义,其它主流浏览器仅识别“Cache-Control:no-store”的meta标签。
b.在IE中识别到该meta标签含义,并不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面,页面上的资源则不受影响)。
(2)使用缓存有关的HTTP消息报头
在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有:
规则 |
消息包头 |
值/示例 |
类型 |
作用 |
新鲜度 |
Pragma |
no-cache |
响应 |
告诉浏览器忽略资源的缓存副本,每次访问都需要去服务器拉取【http1.0中存在的字段,在http1.1已被抛弃,使用Cache-Control替代,但为了做http协议的向下兼容,很多网站依旧会带上这个字段】 |
Expires |
Mon,15Aug201603:56:47GMT |
响应 |
启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求【http1.0中存在的字段,该字段所定义的缓存时间是相对服务器上的时间而言的,如果客户端上的时间跟服务器上的时间不一致(特别是用户修改了自己电脑的系统时间),那缓存时间可能就没啥意义了。在HTTP1.1版开始,使用Cache-Control:max-age=秒替代】 |
|
Cache-Control |
no-cache |
响应 |
告诉浏览器忽略资源的缓存副本,强制每次请求直接发送给服务器,拉取资源,但不是“不缓存” |
|
no-store |
响应 |
强制缓存在任何情况下都不要保留任何副本 |
||
max-age=[秒] |
响应 |
指明缓存副本的有效时长,从请求时间开始到过期时间之间的秒数 |
||
public |
响应 |
任何路径的缓存者(本地缓存、代理服务器),可以无条件的缓存改资源 |
||
private |
响应 |
只针对单个用户或者实体(不同用户、窗口)缓存资源 |
||
Last-Modified |
Mon,15Aug201603:56:47GMT |
响应 |
告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified:GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间】 |
|
If-Modified-Since |
Mon,15Aug201603:56:47GMT |
请求 |
其值为上次响应头的Last-Modified值,再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),包括更新Last-Modified的值,HTTP200;若最后修改时间较旧,说明资源无新修改,则响应HTTP304(无需包体,节省浏览),告知浏览器继续使用所保存的cache |
|
校验值 |
ETag |
"fd56273325a2114818df4f29a628226d" |
响应 |
告诉浏览器当前资源在服务器的唯一标识符(生成规则又服务器决定) |
If-None-Match |
"fd56273325a2114818df4f29a628226d" |
请求 |
当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304 |
实际工作中我们完全可以时用上面这些参数的设置来组织/控制、更好的利用缓存来为我们服务。
浏览器缓存问题原理以及解决方案相关推荐
- 29、浏览器缓存的原理
一.浏览器缓存和http协议标头 1.缓存优点: 提高网页请求响应的速度 降低服务器带宽的占用 降低服务器的负载(主要指的是cpu 内存这些硬件资源)占用 提高用户的体验度 降低用户的焦虑 2.浏览器 ...
- 微信浏览器缓存问题的终极解决方案
微信浏览器缓存,经过一段时间的尝试发现微信浏览器缓存的两个特点: 1. 微信浏览器首先会缓存整个页面的内容, 如果页面地址没有变更,在一段时间内(几个小时),进入页面都不会对页面中js,css文件发出 ...
- 十分钟彻底弄懂浏览器缓存机制原理
前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能. 但是对于很多前端 ...
- Cache-Control浏览器缓存
描述 同一个标签页,打开 A 站点,访问 config 接口,正常:打开 B 站点,访问 config 接口,正常:通过浏览器后退返回 A 站点,访问 config 接口,数据异常,config 返回 ...
- 版本更新带来的缓存问题_浏览器缓存原理总结
作者: Poetry 来源:http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识 分为强缓存和协商缓存 1.浏览器在加载资源时, ...
- 里面怎么缓存图片_浏览器缓存原理总结
一.浏览器缓存基本认识 分为强缓存和协商缓存 1.浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务 ...
- 浏览器缓存导致FLASH资源更新问题的解决方案
在网上搜浏览器缓存问题时,遇上了很多问题.一是不知道应该用何种关键字搜索,二是一搜出来,就全是讲的是如何禁用浏览器缓存的方案. 作为大型点的FLASH WEBGAME来说,不缓存显然是不行的.总体上来 ...
- 浏览器缓存原理以及本地存储
作为一名前端工作人员,前端的缓存知识是必须掌握的,因为一个网站打开网页的速度直接关系到用户体验,用户粘度,而提高网页的打开速度有很多方面需要优化,其中比较重要的一点就是利用好缓存,缓存文件可以重复利用 ...
- 前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理?送你满分答案...
(本文适合所1-3年的前端阅读) 原文链接: http://blog.poetries.top/2019/01/02/browser-cache/ 一.浏览器缓存基本认识 分为强缓存和协商缓存 浏览器 ...
最新文章
- Timer 的简单介绍
- 计算机学具制作,一种具有防护功能的计算机编程学具的制作方法
- 解决AJAX跨域WCF的问题详解
- 投稿须知 | 让你的文字被很多很多很多人看到
- dns 320 linux,linux 下 dns服务器(三 配置篇)
- vision安装过程中出错_scrapy安装过程中之Twisted的安装遇到的坑
- Unity3D动画面板编辑器状态属性对照表
- refs格式linux支持么,小科普 | 你听过ReFS硬盘格式吗?
- Markdown 教程
- Docker部署homeassitant
- datasource java用法_Java Datasource介绍
- Linux软件更新时遇到的各种问题以及解决办法
- 如何在Windows上测试ip和端口
- vmware、操作系统、数据库软件、oracle 补丁集地址下载
- 关于java导出Excel 并设置密码权限
- Hadoop基础-10-YARN
- 微医网爬虫(二) java实现
- 【推荐算法论文阅读】LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation
- Linux库函数之opendir/closedir/readdir
- 学数控编程,知道这三段代码就够了,很实用
热门文章
- 11选5下期算法_11选5为什么你不中奖
- 算法题:输入一个表示整数的字符串,把该字符串转换成整数并输出。例如输入字符串“12345”,则输出整数“12345”
- [Swift]LeetCode1147. 段式回文 | Longest Chunked Palindrome Decomposition
- Leetcode 152.乘机最大子序列
- Mongodb 分片与副本集
- Halcon学习笔记——机器视觉应用工程开发思路及相机标定
- linux下解析域名
- [Noip模拟赛] Power
- Oracle 数据库导入导出 dmp文件
- Direct3D学习_绘制