前端浏览器缓存的一些机制和提高性能的方案

原创 2016年08月31日 12:08:58

在解决这个问题之前,我们有必要了解一番前端浏览器缓存的一些机制和提高性能的方案。

  1. GZip压缩文件可以减少响应的大小,能够达到节省带宽的目的。
  2. 浏览器缓存中存有文件副本的时候,不能确定有效的时候,会生成一个条件get请求。
    1. 在请求的头中会包含 If-Modified-Since。
    2. 如果服务器端文件在这个时间后发生过修改,则发送整个文件给前端。
    3. 如果没有修改,则返回304状态码。并不发送整个文件给前端。
    4. 另外一种判断机制是ETag。在此并不讨论。
  3. 如果副本有效,这个get请求都会省掉。判断有效的最主要的方法是服务端响应的时候带上Expires的头。
    1. 浏览器会判断Expires头,直到制定的日期过期,才会发起新的请求。
    2. 另一个可以达到相同目的的方法是返回Cache-Control: max-age=xxxx。

欲了解更多缓存机制,请参见Steve Sounders著作的《高性能网站建设指南》。

浏览器在发送请求之前由于检测到Cache-Control和Expires(Cache-Control的优先级高于Expires,但有的浏览器不支持Cache-Control,这时采用Expires),如果没有过期,则不会发送请求,而直接从缓存中读取文件。

前端静态资源缓存的解决方案

  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2017年02月10日 10:13
  • 1591

nginx超详细讲解之压缩和缓存

一、 gzip压缩详解 1.1gzip作用范围 http server location 1.2gzip配置的常用参数 gzip on|off; #是否开启gzip...
  • u014459326
  • u014459326
  • 2016年11月27日 23:10
  • 632

Nginx的静态资源缓存以及压缩

Nginx是一款轻量级的网页服务器、反向代理器以及电子邮件代理服务器。Nginx采用的是异步非阻塞的通信机制(epoll模型),支持更大的并发连接.所谓的epoll模型:当事件没有准备好时,就放入ep...
  • JY_He
  • JY_He
  • 2016年08月22日 19:18
  • 12007

HTTP缓存机制及原理

彻底弄懂HTTP缓存机制及原理 前言 Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为...
  • xiaoxingfu0604
  • xiaoxingfu0604
  • 2018年01月15日 16:45
  • 7

web前端浏览器缓存应用(带图文解说)

前端缓存一般针对如CSS,JS,image等使用缓存Expires头 这些标头用于指定相应时间段,浏览器可在指定的这段时间内使用已缓存的资源,而无需查看网络服务器是否提供了新版资源。这些缓存标头功能...
  • qq_20334295
  • qq_20334295
  • 2017年01月16日 19:45
  • 2272

前端几种本地缓存机制

在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge  1.Cookie的特点 1)cookie的大小受限制...
  • Daisy__xu
  • Daisy__xu
  • 2017年04月20日 15:07
  • 4904

前端优化之——使用浏览器缓存

问题产生原因:
  • chenjing502
  • chenjing502
  • 2014年04月28日 01:10
  • 4579

前端css,js缓存提升网站性能

看到知乎上的这篇文章,感觉受益匪浅。怕下次找不到了,就转载在博客里。文末注明出处。 这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到...
  • huanghanqian
  • huanghanqian
  • 2016年03月16日 10:08
  • 2746

[ 前端工程 ] 静态资源缓存的处理方式

原问题是: 一般浏览器对静态资源的缓存导致的更新不及时问题,我们是怎么处理的?有哪几种方式? 为什么会产生这些方式?(其实就是各种方式的优劣)...
  • yangzhihello
  • yangzhihello
  • 2016年11月11日 19:02
  • 2724

前端页面利用localStorage设置缓存方案

前端页面利用localStorage设置缓存方案 localStorage的存储空间大致在5M左右,各大浏览器略有差别。我再chrome 54中测试能放下 5233962 字节,该值并不精确,通过每次...
  • yhaibo222
  • yhaibo222
  • 2016年12月06日 23:13
  • 1722
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端浏览器缓存的一些机制和提高性能的方案
举报原因:
原因补充:

(最多只允许输入30个字)