浏览器缓存问题原理以及解决方案

浏览器缓存问题:

简单来说,浏览器缓存就是把一个已经请求过的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

 实际工作中我们完全可以时用上面这些参数的设置来组织/控制、更好的利用缓存来为我们服务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370092.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Scikit-Learn机器学习入门

现在最常用的数据分析的编程语言为R和Python。每种语言都有自己的特点&#xff0c;Python因为Scikit-Learn库赢得了优势。Scikit-Learn有完整的文档&#xff0c;并实现很多机器学习算法&#xff0c;而每种算法使用的接口几乎相同&#xff0c;可以非常快的测试其它学习算法。 Pa…

Apache Camel入门

在先前的博文中&#xff0c;我们了解了企业集成模式&#xff08;EIP&#xff09;。 现在&#xff0c;在这篇文章中&#xff0c;我们将研究实现这些模式的Apache Camel框架。 关于骆驼&#xff1a; Apache Camel是一个开放源代码项目&#xff0c;已有将近5年的历史&#xff0c;…

android studio smssdk,SMSSDK for Android 配置

1.集成之前先要申请Mob的appkey与appsecret2.在Mob官网下载最新SDK&#xff0c;解压后会看到以下目录结构&#xff1a;SMSSDK下存放的是短信SDK的全部内容。3.在android studio中加入SMS的第三方库AS版本的SMSSDK目录下包含以下内容&#xff1a;MobCommons.jar&#xff1a;Mob …

JavaScript总结(3)

第3章 获取用户的输入 &#xff1c;script&#xff1e;10 intAprompt("请输入第一个数字","");11 intBprompt("请输入第二个数字",27);默认是2712 document.write("你输入的第一个数字是"intA);13 document.write("&#xff1c;…

android listview 开发,android开发之ListView实现

今天又初步学习了一下ListView控件&#xff0c;看看效果如下&#xff1a;LisViewActivity.java源码&#xff1a;package com.jinhoward.UI_listview;import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;import android.os.Bundl…

Less 的用法

1. node.js node.js是一个前端的框架 自带一个包管理工具npm node.js 的安装 官网&#xff1a;http://nodejs.cn/ 在命令行检验是否安装成功 切换到项目目录&#xff0c;初始化了一个package.json文件 安装与卸载jQuery包&#xff08;例子&#xff09; 安装 卸载 安装淘宝…

浅谈springboot整合ganymed-ssh2远程访问linux

环境介绍 技术栈 springbootmybatis-plusmysqlganymed-ssh2 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis-plus 3.5.3.2 SSH(远程连接工具)连接原理&#xff1a;ssh服务是一个守护进程(demon)&#xff0c;系统后台监听客户…

android pick file,LFilePicker---文件选择利器,各种样式有它就够了

LFilePicker在 Android 开发中如果需要选择某个文件&#xff0c;可以直接调取系统的文件管理器进行选择&#xff0c;但是无法保证各个厂商的手机界面一致&#xff0c;而且解析Uri 还比较繁琐&#xff0c;如果还需要多选呢&#xff1f;需要文件类型过滤呢&#xff1f;老板说界面…

在JVM之下–类加载器

在许多开发人员中&#xff0c;类加载器是Java语言的底层&#xff0c;并且经常被忽略。 在ZeroTurnaround上 &#xff0c;我们的开发人员必须生活&#xff0c;呼吸&#xff0c;饮食&#xff0c;喝酒&#xff0c;并且几乎与类加载器保持亲密关系&#xff0c;才能生产JRebel技术&a…

matplotlib绘制饼状图

源自http://blog.csdn.net/skyli114/article/details/77508430?ticketST-41707-PzNbUDGt6R5KYl3TkWDg-passport.csdn.net pyplot使用plt.pie()来绘制饼图 1 import matplotlib.pyplot as plt 2 labels frogs, hogs, dogs, logs 3 sizes 15, 20, 45, 10 # [15,20,45,10…

自适应宽度元素单行文本省略用法探究

单行文本省略是现代网页设计中非常常用的技术&#xff0c;几乎每个站点都会用到。单行文本省略适用于显示摘要信息的场景&#xff0c;如列表标题、文章摘要等。在响应式开发中&#xff0c;自适应宽度元素单行文本省略容易失效不起作用&#xff0c;对网页开发这造成困扰。因此&a…

P3390 【模板】矩阵快速幂

题目背景 矩阵快速幂 题目描述 给定n*n的矩阵A&#xff0c;求A^k 输入输出格式 输入格式&#xff1a; 第一行&#xff0c;n,k 第2至n1行&#xff0c;每行n个数&#xff0c;第i1行第j个数表示矩阵第i行第j列的元素 输出格式&#xff1a; 输出A^k 共n行&#xff0c;每行n个数&…

c#精彩编程200例百度云_永安市教育局被授予“人工智能编程教育试验区”

11月28日&#xff0c;“第二届人工智能与机器人教育大会青少年人工智能与编程教育主题论坛”在厦门召开。永安市教育局被中国教育发展战略学会人工智能与机器人教育专委会授予“人工智能编程教育试验区”牌匾&#xff0c;巴溪湾小学、西门小学、三中、一中附属学校、实验小学等…

Spring Data JPA和分页

让我们从支持分页的经典JPA方法开始。 考虑一个简单的域类–一个具有名字&#xff0c;姓氏的“成员”。 为了支持在成员列表上进行分页&#xff0c;JPA方法是支持一种查找器&#xff0c;该查找器将获取第一个结果&#xff08;firstResult&#xff09;的偏移量和要检索的结果&am…

Windows环境下安装、卸载Apache

安装Apache 服务 打开 Apcahe的目录 &#xff0c;打开bin目录&#xff0c; 如&#xff1a;E:\wamp\Apache24\bin &#xff0c;打开目录&#xff0c;Shift键 鼠标右键 &#xff0c; 点击 在此处打开命令窗口或者W快捷键直接到此处&#xff0c; 也可以Window键r&#xff0c;输入…

css清浮动

我们在平常做项目的时候&#xff0c;float这个css属性经常会用到。元素浮动会让元素脱离文档流&#xff0c;从而不能撑开父级的内容。今天我将展示常见的清除浮动的方法。 什么是浮动 浮动元素脱离文档流并且向左或者向右移动&#xff0c;直到浮动元素的边缘碰到父级框或者另…

DirectX11 学习笔记7 - 支持自由移动的摄像机

如今将又一次制定一个camera摄像机。能够自由移动。比方前进 后退&#xff0c;上游 下潜。 各个方向渲染之类的。 首先设置按键。 这个时候须要在 XWindow.h 里面 bool XWindow::frame() {//推断是否按下ESC键if(x_input->isKeyDown(VK_ESCAPE))return false;//假设A,S,D,W,…

腾讯吃鸡 android,腾讯吃鸡手游《光荣使命》正式上线:安卓/iOS不限号测试

IT之家11月29日消息 今天下午&#xff0c;腾讯首款百人战术竞技手游《光荣使命》在安卓、iOS双平台正式上线&#xff0c;开启全面测试。(官网下载&#xff1a;点此链接&#xff0c;双平台已开放下载。)该游戏采用第三人称射击视角&#xff0c;玩家化身参与“使命行动”军事演习…

lazada铺货模式的选品_lazada小白的运营难点→铺货与精细化运营的优劣势详解

lazada是铺货还是精细化经营第一种铺货铺货作为平台早期都是比较受欢迎的&#xff0c;平台的蛮荒期&#xff0c;成长期当中&#xff0c;铺货的商家是非常受欢迎的&#xff0c;因为平台需要更多SKU产品&#xff0c;去吸引买家&#xff0c;铺货这个时候是最好的也是能最快的成长起…

excel数据生成sql insert语句

excel数据生成sql insert语句 excel表格中有A、B、C三列数据&#xff0c;希望导入到数据库users表中&#xff0c;对应的字段分别是name,sex,age 。 在你的excel表格中增加一列&#xff0c;利用excel的公式自动生成sql语句&#xff0c;方法如下&#xff1a; 1、增加一列&#xf…