前端性能优化:浏览器的2种缓存方式要弄清

发表于:2023-3-03 09:11

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:张欢    来源:51Testing软件测试网原创

分享:
  在前端性能优化中,最重要的就是缓存,使用缓存可以极大的提升浏览器的响应速率。
  什么是缓存呢?
  当我们第一次访问某个网站时,浏览器会把网站中的图片等资源存储在电脑中,以备后续使用,第二次访问该网站时,浏览器直接访问缓存中的数据,从而达到提高浏览器的响应效率,优化用户的体验。
  缓存的优点
  1.提高浏览器的响应速率;
  2.减少服务器的访问压力;
  3.减少对网络的压力。
  除了浏览器缓存之外,还存在CDN缓存、代理服务器缓存等等;这里主要描述浏览器缓存,浏览器缓存也指的是HTTP缓存,当我们使用浏览器用http协议与服务器交互时,浏览器会使用一种与服务器约定的规则进行缓存操作。
  缓存的类型
  浏览器的缓存位置一般分为强缓存和协商缓存。
  他们之前的区别是强缓存不需要向浏览器发送请求,直接从缓存中读取资源,协商缓存需要询问浏览器缓存是否过期以确定从哪里读取资源。
  强缓存通过设置http header来实现:Expires 和 Cache-Control。
  Expires用来指定资源到期的具体时间,是服务器的具体时间点。该属性是HTTP/1中使用的属性,受限于本地时间,如果本地时间修改,可能会造成缓存失效。
  Cache-Control也用来指定资源的到期时间,他的时间是一个时间范围。比如:Cache-Control:max-age=300,单位是秒,代表该资源的有效时间是5分钟。该属性是HTTP1.1中的属性,如果Expires和Cache-Control都设置,则Cache-Control的优先级高于Expires。
  协商缓存是在强缓存失效之后,浏览器携带缓存标识向服务器发起请求,由服务器决定是否使用缓存。协商缓存可以通过两种HTTP Header来实现:Last-Modified和ETag。
  Last-Modified
  浏览器第一次访问资源时,服务器会在response头中添加时间节点,这个事件点是服务器最后一次修改文件的时间点,浏览器第二次访问该资源时,检测到缓存文件中有last-Modified,就会在第二次请求头中添加if-Modified-Since,值为上次Last-Modified的值,服务器拿到该值后,会与该资源在服务器端的最后修改时间做对比,如果相同,则说明命中缓存,返回304,如果不相同,则会返回200,并返回新资源。
  ETag
  和Last-Modified相同,Last-Modified会返回最后修改的时间点,而Etag会返回一个新的token,第二次请求时,token会在If-None-Match中返回给服务器,服务器会比较token是否一致。
  总结
  浏览器缓存的强缓存和协商缓存如下图:
  版权声明:本文出自51Testing会员投稿,51Testing软件测试网及相关内容提供者拥有内容的全部版权,未经明确的书面许可,任何人或单位不得对本网站内容复制、转载或进行镜像,否则将追究法律责任。
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号