什么是ETag?

  实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串,是web服务器用于确认缓存组件的有效性的一种机制,通常可以使用组件的某些属性来构造它。

条件GET请求

  浏览器下载组件的时候,会将它们存储到浏览器缓存中。如果需要再次获取相同的组件,浏览器将检查组件的缓存时间,假如已经过期,那么浏览器将发送一个条件GET请求到服务器,服务器判断缓存还有效,则发送一个304响应,告诉浏览器可以重用缓存组件。

  那么服务器是根据什么判断缓存是否还有效呢?

  答案有两种方式,一种是前面提到的ETag,另一种是根据最新修改时间。先来看看最新修改时间。

最新修改时间

  原始服务器通过Last-Modified响应头来返回组件的最新修改时间。

  以一个实际例子来说明,当我们不带缓存访问www.google.com.hk的时候,我们需要下载google的logo,这时会发送这样一个HTTP请求:

Request:
GET /logo.png HTTP 1.1
Host: www.google.com.hk Response:
HTTP 1.1 OK
Last-Modified:Wed, Oct :: GMT
  当需要再次访问相同组件的时候,同时缓存已经过期,浏览器会发送如下条件GET请求:

Request:
  GET /logo.png HTTP 1.1
  If-Modified-Since:Wed, Oct :: GMT
  Host: www.google.com.hk Response:
  HTTP 1.1 Not Modified

实体标签

  ETag提供了另外一种方式,用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。

  摘抄自书上的例子:

  1、不带缓存的请求:

Request:
  GET /i/yahoo/gif HTTP 1.1
  Host: us.yimg.com Response:
  HTTP 1.1 OK
  Last-Modified:Tue, Dec :: GMT
  ETag:”10c24bc-4ab-457elc1f“  
  2、再次请求相同组件:

Request:
  GET /i/yahoo/gif HTTP 1.1
  Host: us.yimg.com
  If-Modified-Since:Tue, Dec :: GMT
  If-None-Match:”10c24bc-4ab-457elc1f“ Response:
  HTTP 1.1 Not Midified

  当ETag和Modified-Time都出现了,则原始服务器禁止返回304,除非请求中的条件头字段全部一致。

为什么要引入ETag?

  ETag主要是为了解决Last-Modified无法解决的一些问题:

  1、一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET;

  2、 某些文件修改非常频繁,比如在秒以下的时间内进行修改,(比方说1s内修改了N次),If-Modified-Since能检查到的粒度是s级的,这种修改无法判断(或者说UNIX记录MTIME只能精确到秒);

  3、某些服务器不能精确的得到文件的最后修改时间。

ETag带来的问题

  ETag的问题在于通常使用某些属性来构造它,有些属性对于特定的部署了网站的服务器来说是唯一的。

  当使用集群服务器的时候,浏览器从一台服务器上获取了原始组件,之后又向另外一台不同的服务器发起条件GET请求,ETag就会出现不匹配的状况。

最佳实践

  1、如果使用Last-Modified不会出现任何问题,可以直接移除ETag,google的搜索首页则没有使用ETag。

  2、确定要使用ETag,在配置ETag的值的时候,移除可能影响到组件集群服务器验证的属性,例如只包含组件大小和时间戳。

前端性能优化:配置ETag的更多相关文章

  1. Web前端性能优化教程08:配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  2. CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  3. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  4. Web前端性能优化全攻略

    网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多 ...

  5. Web前端性能优化全攻略[转载]

    1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最 ...

  6. Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  7. 前端性能优化之gzip

    前言: 如果你是个前端开发人员,你肯定知道线上环境要把js,css,图片等压缩,尽量减少文件的大小,提升响应速度,特别是对移动端,这个非常重要.常用的前端性能优化方法有如下几种 一.减少http请求 ...

  8. 【转】Web前端性能优化——如何提高页面加载速度

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒, ...

  9. 前端性能优化:Add Expires headers

    前端性能优化:Add Expires headers Expires headers 是什么? Expires headers:直接翻译是过期头.Expires headers 告诉浏览器是否应该从服 ...

  10. [好文翻译]WEB前端性能优化的14条规则

    作为一个半前端工程师,而且只会写点HTML5和CSS3的“假”前端工程师,为了能更好地理解一下前端的花花世界,最近拜读了<高性能网站建设指南>一书,对作者提出的前端性能优化的14个规则获益 ...

随机推荐

  1. GRYZ 模 拟 赛 系 列 Xxy 的车厢调度

    Xxy 的车厢调度(train.cpp/c/pas)Description有 一 个 火 车 站 , 铁 路 如 图 所 示 ,每辆火车从 A 驶入,再从 B 方向驶出,同时它的车厢可以重新组合.假设 ...

  2. BZOJ.2007.[NOI2010]海拔(最小割 对偶图最短路)

    题目链接 想一下能猜出,最优解中海拔只有0和1,且海拔相同的点都在且只在1个连通块中. 这就是个平面图最小割.也可以转必须转对偶图最短路,不然只能T到90分了..边的方向看着定就行. 不能忽略回去的边 ...

  3. BZOJ.1014.[JSOI2008]火星人(Splay 二分 Hash)

    题目链接 后缀数组显然不行啊.求LCP还可以哈希+二分,于是考虑用平衡树维护哈希值. \[某一节点的哈希值 = hs[lson]*base^{sz[rson]+1} + s[rt]*base^{sz[ ...

  4. 关于tensorflow中tensorborad No dashboards are active for the current data set.的解决办法

    说明:这个问题,困惑了好久,在网上查了很久,一直没能解决,直到我在stackoverflow上看到有一位博主的回答 链接在这里:(https://stackoverflow.com/questions ...

  5. C#远程调用技术WebService葵花宝典

    一.课程介绍 直接开门见山吧,在学习之前阿笨想问大家一句,关于WebService远程过程调用技术(RPC) 你真的会了吗?不要跟老夫扯什么WebService技术已经过时,如果你的内心有在偷偷告诉你 ...

  6. JavaScript学习总结(十五)——Function类

    在JavaScript中,函数其实是对象,每个函数都是Function类的实例,既然函数对象,那么就具有自己的属性和方法,因此,函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定. 一.函数的 ...

  7. 高速排序C++实现

    //高速排序 #include<iostream> #include<functional> #include<Windows.h> using namespace ...

  8. 委托、Lambda表达式、事件系列05,Action委托与闭包

    来看使用Action委托的一个实例: static void Main(string[] args) { int i = 0; Action a = () => i++; a(); a(); C ...

  9. INotifyPropertyChanged接口的实现

    何时实现INotifyPropertyChanged接口 官方解释:INotifyPropertyChanged  接口用于向客户端(通常是执行绑定的客户端)发出某一属性值已更改的通知.官方解释的很模 ...

  10. Mysql导入大容量SQL文件数据问题

    mysql在通过导入sql文件可能会出现下面二个问题: 1.如果sql文件过大,会出现"MySQL server has gone away"问题; 2.如果sql文件数据有中文, ...