缓存原理

浏览器缓存分为强缓存和协商缓存

先检查是否过期,没有过期直接使用本地缓存。如果过期,查看是否使用协商缓存

协商缓存流程:
  1. 后端返回headers:
ETag: W/"1e3-1754f0e63af"
Last-Modified: Thu, 22 Oct 2020 06:45:44 GMT
  1. 前端请求headers:
If-Modified-Since: Thu, 22 Oct 2020 06:26:38 GMT
If-None-Match: W/"1ef-1754efce5e8"

首先 If-Modified-Since与Last-Modified对比,这儿最后修改是在45分,缓存的旧文件是在26分,所以直接返回200及新文件。

若 两个时间相等,则对比etag与If-None-Match,若不同,则返回200,相同则返回304,浏览器使用旧文件。

缓存问题

  1. 如果不设置缓存时间(不设置cache-control或者expired),只设置协商缓存,会有缓存时间吗?

    有,若只设置了协商缓存,没有设置强缓存,则强缓存时间大多默认是(date-last-modified)/10,而date只会去浏览器请求时更新,所以不会出现永久不过期情况。
  2. a网站与b网站不同域名,但是却引用了相同地址的图片test.jpg(都是跨域引用),浏览器先去访问a网站,再去访问b网站,那么test.jpg会使用缓存吗?

    会,缓存时浏览器行为,与域名无关。

缓存引发的bug

  1. 修改了js,css,图片等静态文件,但是却没有生效

    html禁止缓存,并且在静态文件请求地址加查询参数 src="test.js?1"
  2. canvas使用跨域图片生成新图片失败(非代理方式)

    首先后端必须配合同意跨域。

    前端img加上crossOrigin属性
const img = new Image
img.setAttribute('crossOrigin', 'anonymous')
img.src='path-to-img'
img.onload=nextstep

如此,大概可以使用ctx.drawImage(img, x0,y0,x1,y1);canvas.toDataURL()了。

但是有一种例外,如果文件服务器,允许跨域,但access-control-allow-origin值不是*,并且没有设置cache-control:no-cache。那么a网站使用了跨域,b网站再使用相同图片。a网站请求图片跨域access-control-allow-origin:a.com,但是b网站去跨域请求时,浏览器直接动用缓存,此处直接跨域失败。

因此网上有人提出方法:在b网站使用图片时使用:img.src=url+'?' + Math.random(),但是无法缓存,可以使用:img.src=url+'?'+location.origin来辨别网站的缓存。

浏览器缓存引起的bug总结的更多相关文章

  1. nginx 与 浏览器缓存

    一.本地静态文件 location /html/{ rewrite ^(html/.*)$ /$1 break; root /data/static; expires 12h; etag off; i ...

  2. 网络协议HTTP TCP/UDP 浏览器缓存 Restful(十)

    一 TCP网络协议 1 建立TCP连接:三次握手原则 客户端通过向服务器端发送一个SYN来创建一个主动打开,作为三次握手的一部分.客户端把这段连接的序号设定为随机数 A. 服务器端应当为一个合法的SY ...

  3. 由于未清除缓存引发的bug

    在写页面的时候,首先引入了本地react.js和react-dom.js 16版本(cjs)的文件,出现如下错误 发现bug后,将本地的react.js和react-dom.js文件改成16.2(um ...

  4. web性能优化:详说浏览器缓存

    TOC 背景 浏览器的总流程图 一步一步说缓存 朴素的静态服务器 设置缓存超时时间 html5 Application Cache Last-Modified/If-Modified-Since Et ...

  5. 理解web缓存 浏览器缓存

    为了: 控制缓存 遇到的现象: 1.开发的时候,浏览器会缓存你的文件,使得你的改动是无效的! 开发过程中:我们是不希望有缓存的. 但正是发布以后,我们是希望页面能够在浏览器缓存,这样用户的体验就会提高 ...

  6. nginx,控浏览器缓存,前端优化方案

    1,困惑 做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面, 因为一直做企 ...

  7. 关于引用JS和CSS刷新浏览器缓存问题

    有时候我们会碰到上线的新版本都要刷新一次缓存的问题.那是因为改了JS的内容,但是JSP引用的地方后面的字符串未发生改变导致浏览器读取浏览器缓存而不会重新加载新的JS内容,以下提供两种解决方式: 1.每 ...

  8. 浏览器缓存相关的Http头介绍:Expires,Cache-Control,Last-Modified,ETag

    转自:http://www.path8.net/tn/archives/2745 缓存对于web开发有重要作用,尤其是大负荷web系统开发中. 缓存分很多种:服务器缓存,第三方缓存,浏览器缓存等.其中 ...

  9. Nginx使用Expires增加浏览器缓存加速

    Max-age是指我们的web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间). Expires它比max-age要麻烦点,Expires指定的时间分&q ...

随机推荐

  1. Mysql 多表连查 xml写法 非注解形式

    1.xml写法 <!-- 联查用户users表 --> <resultMap type="nanh.entity.Tasks" id="selectTa ...

  2. Docker Swarm 集群环境搭建及弹性服务部署

    上一篇文章<Docker Swarm 集群管理利器核心概念扫盲>中我们把 Swarm 重要的概念性知识给大家讲解了一波,理论完事就该实战了,这篇文章带大家从零开始,搭建 Docker Sw ...

  3. Docker数据卷Volume实现文件共享、数据迁移备份(三)

    数据卷volume功能特性 数据卷 是一个可供一个或多个容器使用的特殊目录,实现让容器中的一个目录和宿主机中的一个文件或者目录进行绑定.数据卷 是被设计用来持久化数据的对于数据卷你可以理解为NFS中的 ...

  4. Java基本数据类型、关键字

    Java基本数据类型.关键字 一.Java基本数据类型 Java有8中基本数据类型:byte\char \short \int\float\double\long\boolean 在说明每种类型大小前 ...

  5. Node.js 从零开发 web server博客项目[express重构博客项目]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  6. 告别硬编码,让你的POI导入导出拥抱变化

    GitHub地址 | 博客 | 中文 | English | 原文链接 为什么使用AutoExcel? Excel导入导出在软件开发中非常常见,只要你接触过开发,就一定会遇到.相信很多人会跟我一样选择 ...

  7. 9.Kafka API使用

  8. SpringBoot框架:'url' attribute is not specified and no embedded datasource could be configured问题处理

    一.问题如下: Description:    Failed to configure a DataSource: 'url' attribute is not specified and no em ...

  9. 接口鉴权,提供给第三方调用的接口,进行sign签名

    //场景:公司要跟第三方公司合作,提供接口给对方对接,这样需要对接口进行授权,不然任何人都可以调我们公司的接口,会导致安全隐患: 思路: 在每个接口请求参数都带上ApiKey 和sign签名: 我们在 ...

  10. 给子元素设置margin-top无效果的一种解决方法

    在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题 先是这么写的 <div style="margin-top:30px"> <a style= ...