即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

gzip、长缓存、 entity tag 的使用办法

Web前端 Jogger_Ling 139℃ 0评论
本文目录
[隐藏]

Gzip 可以使资源加载时,大小缩减到原来的 1/3 。长时间缓存可以让浏览器不加载没有变化的文件。这两者都是前端性能优化的范畴,大家都懂的。




1. 资源文件长缓存

将 Cache-Control 改为 public ,并加上一年的长缓存,配合 MD5 版本号实现长缓存 + 按版本号自动更新:

location /res{
    expires      1y;
    add_header   Cache-Control public;
}

2. 为保证缓存效果,先去掉 Etag (Entity Tag)

浏览器会根据 Entity Tag 判断文件是否被修改过。而观星台用的是多台服务器。由于不同的服务器可能对同一个文件生成不同的 Entity Tag,用户第一次从服务器 A 拿过的文件,第二次从服务器 B 拿时,服务器给出的 Entity Tag 有可能不同。这就会造成重复下载,缓存形同虚设。由于已经有 MD5 插件机制起到了类似 Entity Tag 的效果,所以暂时先禁用掉 Entity Tag。

http{
    etag   off;
}

3. Entity Tag 具体的原理

3.1.1. Entity Tags

Entity Tags (ETags) 是 HTTP/1.1 的新特性。在 Conditional GET Requests 中起作用,是一个标识文件特定版本的标记。是除了最后修改时间以外,判断组件是否变化的另一种方式。

 

image


图1 Rule
3
 提到的 If-Modified-Since 请求判断文件是否已修改

 

image


image


图2 如果第一次请求时服务器返回了 ETags 那么每次的 Conditional GET Request 浏览器都会多一个 If-None_Match 请求头判断 ETags 是否改变

Etags 的问题

如果网站使用多个服务器,Apache 和 IIS 的默认配置都会导致不同服务器的同样文件有不同的 ETags,从而大大增加了不必要的流量。


此外,若 ETags 的优先级高于 Expire Header (本章没说清啥情况下 ETags 的优先级高于 Expire Header),则尽管遵循 Rule
3
 为基本不改动的组件设了长 Expire Header ,访问者每次刷新还是会重新下载一次那个组件。很浪费有木有?

解决

要就充分利用 ETags 带来的灵活性,比如根据不同的浏览器给出不同的 ETags (例如谷歌就给中文和英文网站的资源不同的 Etags,可以想象到带来的维护上的方便性);


要么删掉 ETags 。

If-Modified-since 和 Connection: keep alive

首先是一般的 GET 请求和回应的 Headers,如上图所示。向右的箭头是请求,下同。

Compression GET requests and responses

为了节约浏览和时间,可以压缩后传输。上图所示就是压缩传输的请求和回应的 Headers。压缩传输的概念在《CSS Mastery》里面(读书笔记)也有提到。传输的内容是否压缩的信息就包含在如图所示的
HTTP 头里面。

Conditional Get Requests and Responses

上图所示是一种有条件的 GET 请求及其回应的 Headers。浏览器在加载图片的时候往往会这样请求。其中, If-Modified-since 后面的内容是向服务器确认浏览器缓存中的内容是否过时。如果不过时,返回的就是如上图所示的 304 Not Modified。

Conditional GET responses when expires

同样,如果过时,返回的就是如上图的 200 OK。

Keep-alive

另外,HTTP 的早期实现是,每遇到一个 HTTP 请求就打开一个新的 socket 连接。而 HTTP 的很多请求都是在同一个服务器上的,因此这样比较低效。这时改进的方法是,如上图,向服务器请求时使用 keep-alive 的 Connection header。不需要时发送 Connection: close header。

理论上,HTTP/1.1 是不需要发送上图所示的 keep-alive 信息的,但是很多浏览器依然要求(本书影印版出版日期 2008 年 5 月)。






4. 开启 Gzip 压缩

  1. 设置最小 1kb 开启 gzip 压缩;
  2. 开启 gzip_vary ,当用户使用代理服务器的时候,代理服务器会缓存压缩前后两个版本的文件,方便不同浏览器支持情况的用户;
  3. 将 gzip_http_version 设为 1.0,表明为 HTTP/1.0 以上的协议启用 gzip 压缩;
  4. 开启 js 、 css 、 xml 和 txt 文件的 gzip 压缩。其中网络图片(png/jpeg/gif)格式本身的压缩率一般都已经够高,不用再加 gzip 压缩,没什么效果还占用资源。对于观星台某些过大的 jpeg 图片,可以选择自动加 gzip 压缩作为折衷方案。但最主要的还是在做图的时候就设置好质量压缩比最高的压缩程度。
  5. 压缩比例设为 3。最小是 1 ,最大是 10。一般都设为 3。
  6. 对 IE1-6 不启用压缩,因为对 gzip 压缩支持的不太好,可能会出现闪跳问题(当然我们几乎没有这个类型的访客,可加可不加)。
  7. 其它未提到的设置保持默认。
http{
    gzip        on;
    gzip_min_length 1k;
    gzip_vary       on;
    gzip_http_version   1.0;
    gzip_types      text/plain application/x-javascript text/css application/xml image/jpeg;
    gzip_comp_level 3;
    gzip_disable    "MSIE [1-6].";
}


转载请注明:CodingBlog » gzip、长缓存、 entity tag 的使用办法

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情