WEB架构之缓存-DNS与浏览器缓存(02)

2020年7月21日19:40:51 发表评论 668 views

第1章 DNS与浏览器缓存

1.1 浏览器DNS缓存

1.1.1 Chrome浏览器

chrome://net-internals/#dns

WEB架构之缓存-DNS与浏览器缓存(02)

1.1.2 Firefox浏览器

about:config

WEB架构之缓存-DNS与浏览器缓存(02)

1.1.3 DNS预获取

预先将url进行域名解析,将解析结果保存下来加快用户的访问。

WEB架构之缓存-DNS与浏览器缓存(02)

1.2 浏览器缓存

1.2.1 Firefox浏览器缓存

WEB架构之缓存-DNS与浏览器缓存(02)

1.2.2 浏览器和服务器之间基于Last-Modified缓存协商

浏览器向服务器发送If-Modified-Since字段,若发送的时间与服务器上的last-modified时间匹配,则服务器不再向客户端发送数据,浏览器使用本地的缓存打开页面,此时的状态码为304。

WEB架构之缓存-DNS与浏览器缓存(02)

1.2.3 浏览器和服务器之间基于Etag缓存协商

通过算法(根据服务器不同算法也不同,如nginx/apache等)生成标签,每次访问时比对标签,标签相同时则服务器不向客户端传输数据,浏览器使用自己的本地缓存显示页面,此时状态码也为304。这种方式主要用于Last-modified经常变化但是内容却没有变化的情况(实际的使用比较少)。

WEB架构之缓存-DNS与浏览器缓存(02)

1.2.4 浏览器和服务器之间基于Expires缓存协商

通过Cache-Control:max-age设置缓存过期时间长度,Expires显示过期实际时间,到期后彻底消灭连接,此时状态码为200。

WEB架构之缓存-DNS与浏览器缓存(02)

1.2.5 浏览器刷新

1.2.5.1  在地址栏中输入网址后按回车或点击转到按钮

浏览器会对所有没有过期的内容直接使用本地缓存,这个时候Last-Modified、Etag、和Expires均不会受刷新的影响。

1.2.5.2  按F5或浏览器刷新按钮

浏览器会在请求中附加必要的缓存协商,这个时候Last-Modified、ETag就要受影响,要发起缓存协商的动作,但是对Expires无效。

1.2.5.3  按Ctrl+F5或按Ctrl并点击刷新按钮

每次浏览器都发起一个全新的请求,不使用任何缓存。

1.2.6 不使用浏览器缓存

  1. 直接修改文件名
  2. 使用时间戳
  3. 参数缓存:如:http://www.example.com/js/code.js?20160101

1.2.7 设置网站静态文件Expires时间

  1. 图片文件:每次更新都会生成新的文件名,此时Expires时间可以设置长时间,如1年
  2. JS/CSS文件:根据业务类型设置Expires时间,若经常变化则Expires时间设置短一些,相反则设置的长一些
  3. ICO文件:不需要设置,浏览器会自动强制设置缓存。

备注:由于现在很多浏览器默认回去请求网站小图标ico文件,此时网站若没有ico文件则会出现许多404错误,此时可以在服务器端编写location规则,设置ico为access off,禁止浏览器访问ico文件。

weinxin
我的微信
如果有技术上的问题可以扫一扫我的微信
版权声明
1. 本网站名称:Leon的博客
2. 本站永久网址:https://blog.leonshadow.cn
3. 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ632113590进行删除处理。
4. 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6. 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
liyang