浏览器优化 | 云防线技术博客

浏览器优化

来源:本站原创 网站优化 超过围观 0条评论

浏览器优化主要是利用了浏览器缓存将文件保存在客户端,好的缓存策略可以减少对网络带宽的占用,可以提高访问速度,提高用户的体验,还可以减轻服务器的负担。因此 我们有必要了解它的实现原理,用来提高网站的性能。

当一个客户端请求web服务器, 请求的内容可以从以下几个地方获取:服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存状态。

1.最新的:选择不缓存页面,每次请求时都从服务器获取最新的内容。

2.未过期的:在给定的时间内缓存,如果用户刷新或页面过期则去服务器请求,否则将 读取本地的缓存,这样可以提高浏览速度。

3.过期的:也就是陈旧的页面,当请求这个页面时,必须进行重新获取。

页面的缓存状态是由http header决定的,一个浏览器请求信息,一个是服务器响应信息。和客户端缓存相关的Http头有以下几个,分别是:

Cache-Control:

Cache-Control 是最重要的规则。这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令。该字段通常覆盖默认缓存算法。另外,缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令。

简单地说,该字段用于控制浏览器在什么情况下直接使用本地缓存而不向服务器发送请求。一般具有以下值:

● public: 所有内容都将被缓存

● private: 内容只缓存到似有缓存中

● no-cache: 所有内容都不会被缓存

● no-store: 所有内容都不会被缓存到缓存或者internet临时文件中

● must-revalidation/proxy-revalidation: 如果缓存的内容失效,请求必须发送到服务器/代理以进行重新验证

● max-age=xxx( xxx is numeric ): 缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

其中最常用的属性便是 max-age, 这个字段很简单,就是浏览器在资源成功请求后的制定时间内,都将直接调用本地缓存和不会向服务器去请求数据。

Expires:

Expires 头部字段提供一个日期和时间,在该日期前的所有对该资源的请求都会直接使用浏览器缓存而不用向服务器请求(注意:cache-control max-age 和 s-maxage 将覆盖 Expires 头部。)

Expires 字段接收以下格式的值:”Expires: Sun, 08 Nov 2009 03:37:26 GMT”。

但是使用Expires存在服务器端时间和浏览器时间不一致的问题。

Last-Modified/E-tag:

Last-Modified和E-tag的作用都是向服务器确认当前缓存文件是否为最新。抛开功能不看,这两个字段的表现如下:

● 若服务器在响应一个资源时添加了Last-Modified字段,那么当下一次浏览器再一次向服务器请求该资源时(前提是浏览器中上一次的资源被缓存过了),会在请求header中包含If-Modified-Since字段,且值与服务器第一次响应给浏览器的Last-Modified字段一致

● 若服务器在响应一个资源时添加了ETag字段,那么当下一次浏览器再一次向服务器请求该资源时(前提是浏览器中上一次的资源被缓存过了),会在请求header中包含If-None-Match字段,且值与服务器第一次响应给浏览器的ETag字段一致。那么上述是遵循了Http协议的浏览器会自动实现的,而要实现304的功能,就需要服务器(比如Apache对于静态资源会自动实现这两个字段的响应)或者我们手动在服务器端编写响应的逻辑来实现。

● 若服务器在收到的资源请求中发现含有Last-Modified字段,则说明浏览器中包含了该资源的某一版本的缓存,此时服务器端将根据该字段的值进行一定的逻辑判断,以决定让浏览器直接使用已有的缓存(返回304)还是将最新的文件发送过去(200,发送新文件并更新Last-Modified字段)

● 若服务器在收到的资源请求中发现含有If-None-Matc字段,则说明浏览器中包含了该资源的某一版本的缓存,此时服务器端将根据该字段的值进行一定的逻辑判断,以决定让浏览器直接使用已有的缓存(返回304)还是将最新的文件发送过去(200,发送新文件,并更新ETag)

若同时使用了Last-Modified和ETag,正确的做法应该是当两者都符合条件时,才返回304

什么时候使用ETag?

Etag 主要为了解决Last-Modified 无法解决的一些问题。

● 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新GET。这种情况下可以将某个能用来表明文件内容是否被更改的值(比如md5)来作为ETag

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

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

在CloudFence您只需要一个开关,我们就会为您选择最佳的浏览器缓存策略。

版权信息:原创文章:云防线
本文标题:浏览器优化
本文链接:http://blog.cloudfence.cn/?p=37转载请注明转自云防线
如果喜欢:点此订阅本站
上篇文章:
下篇文章: