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

原创 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),如果没有过期,则不会发送请求,而直接从缓存中读取文件。

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

前端几种本地缓存机制

在漫长的前端开发过程中,我们常用的几种本地缓存机制:Cookie,LocalStorge,SessionStorge  1.Cookie的特点 1)cookie的大小受限制...

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

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

H5 缓存机制浅析 移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web 应用可进...

Web前端的缓存机制(那些以代价换来的效率)

对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色。例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的...

前端性能优化归纳总结篇!!!

周五,一周最后一天,应该是归纳总结、冥想思考、节奏放缓的一天。程序员的每个工作日都仿佛是在进行着战斗,看不见的硝烟弥漫在键盘和显示器之间,也有可能弥漫在手机和手指之间。作为一个前端开发工程师,性能优化...

前端性能优化之——缓存

*缓存是前端性能优化的重要方式之一。缓存方式有多种,但都不难理解。 实现方式大致分三类:HTTP协议头控制,Dom Storage、AppCache。* 一.HTTP协议头控制 Cach...
  • loguat
  • loguat
  • 2017年07月28日 13:49
  • 223

Web 解决浏览器缓存js,css等静态文件的方法

方法一:生成随机数字缺点,浏览器缓存失去意义,每次都动态加载方法二 版本号控制设置全局变量,每次发布前版本号加1 ...

最常被遗忘的 Web 性能优化:浏览器缓存

一提起缓存, Web开发者们总是在想数据库缓存、页面静态化、使用 Redis内存缓存。这些方法都有一个共性,就是集中在后台,目的就是加快数据的读取,少用比较容易产生瓶颈的部分。 后台该优化的都优化到...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端浏览器缓存的一些机制和提高性能的方案
举报原因:
原因补充:

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