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

1. HTML5缓存机制介绍

HTML5是新一代的HTML标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。HTML5引入的离线存储,这意味着Web应用可进行缓存,并可在没有因特网连接时进行访问。

HTML5应用程序缓存为应用带来三个优势:

  • 离线浏览:用户可在应用离线时使用它们;
  • 速度:已缓存资源加载得更快;
  • 减少服务器负载:浏览器将只从服务器下载更新过或更改过的资源。

根据标准,到目前为止,HTML5一共有6种缓存机制,有些是之前已有,有些是HTML5才新加入的。

  1. 浏览器缓存机制;
  2. Dom Storgage(Web Storage)存储机制;
  3. Web SQL Database存储机制;
  4. Application Cache(AppCache)机制;
  5. Indexed Database (IndexedDB);
  6. File System API。

下面我们首先分析各种缓存机制的原理、用法及特点;然后针对Android移动端Web性能加载优化的需求,看如何适当利用缓存机制来提高Web的加载性能。


2. HTML5缓存机制原理分析

2.1 浏览器缓存机制

浏览器缓存机制是指通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或Etag)等字段来控制文件缓存的机制。这应该是Web中最早的缓存机制了,是在HTTP协议中实现的,有点不同于Dom
Storage、AppCache等缓存机制,但本质上是一样的。可以理解为,一个是协议层实现的,一个是应用层实现的。

Cache-Control用于控制文件在本地缓存有效时长。最常见的,比如服务器回包:Cache-Control:max-age=600表示文件在本地应该缓存,且有效时长是600秒(从发出请求算起)。在接下来600秒内,如果有请求这个资源,浏览器不会发出HTTP请求,而是直接使用本地缓存的文件。

Last-Modified是标识文件在服务器上的最新更新时间。下次请求时,如果文件缓存过期,浏览器通过If-Modified-Since字段带上这个时间,发送给服务器,由服务器比较时间戳来判断文件是否有修改。如果没有修改,服务器返回304告诉浏览器继续使用缓存;如果有修改,则返回200,同时返回最新的文件。

Cache-Control通常与Last-Modified一起使用。一个用于控制缓存有效时间,一个在缓存失效后,向服务查询是否有更新。

Cache-Control还有一个同功能的字段:Expires。Expires的值一个绝对的时间点,如:Expires: Thu, 10 Nov
2015 08:45:11 GMT,表示在这个时间点之前,缓存都是有效的。

Expires是HTTP1.0标准中的字段,Cache-Control是HTTP1.1标准中新加的字段,功能一样,都是控制缓存的有效时间。当这两个字段同时出现时,Cache-Control是高优化级的。

Etag也是和Last-Modified一样,对文件进行标识的字段。不同的是,Etag的取值是一个对文件进行标识的特征字串。在向服务器查询文件是否有更新时,浏览器通过If-None-Match字段把特征字串发送给服务器,由服务器和文件最新特征字串进行匹配,来判断文件是否有更新。没有更新回包304,有更新回包200。Etag和Last-Modified可根据需求使用一个或两个同时使用。两个同时使用时,只要满足基中一个条件,就认为文件没有更新。

另外有两种特殊的情况:

  • 手动刷新页面(F5),浏览器会直接认为缓存已经过期(可能缓存还没有过期),在请求中加上字段:Cache-Control:max-age=0,发包向服务器查询是否有文件是否有更新。
  • 强制刷新页面(Ctrl+F5),浏览器会直接忽略本地的缓存(有缓存也会认为本地没有缓存),在请求中加上字段:Cache-Control:no-cache(或
    Pragma:no-cache),发包向服务重新拉取文件。

下面是通过Google Chrome浏览器(用其他浏览器+抓包工具也可以)自带的开发者工具,对一个资源文件不同情况请求与回包的截图。

首次请求:200

缓存有效期内请求:200(from cache)

缓存过期后请求:304(Not Modified)

一般浏览器会将缓存记录及缓存文件存在本地Cache文件夹中。Android下App如果使用Webview,缓存的文件记录及文件内容会存在当前App的Data目录中。

分析:Cache-Control和Last-Modified一般用在Web的静态资源文件上,如JS、CSS 和一些图像文件。通过设置资源文件缓存属性,对提高资源文件加载速度,节省流量很有意义,特别是移动网络环境。但问题是:缓存有效时长该如何设置?如果设置太短,就起不到缓存的使用;如果设置的太长,在资源文件有更新时,浏览器如果有缓存,则不能及时取到最新的文件。

Last-Modified需要向服务器发起查询请求,才能知道资源文件有没有更新。虽然服务器可能返回304告诉没有更新,但也还有一个请求的过程。对于移动网络,这个请求可能是比较耗时的。有一种说法叫“消灭304”,指的就是优化掉304的请求。

抓包发现,带if-Modified-Since字段的请求,如果服务器回包304,回包带有Cache-Control:max-age或Expires字段,文件的缓存有效时间会更新,就是文件的缓存会重新有效。304回包后如果再请求,则又直接使用缓存文件了,不再向服务器查询文件是否更新了,除非新的缓存时间再次过期。

另外,Cache-Control与Last-Modified是浏览器内核的机制,一般都是标准的实现,不能更改或设置。以QQ浏览器的X5为例,Cache-Control与Last-Modified缓存不能禁用。缓存容量是12MB,不分Host,过期的缓存会最先被清除。如果都没过期,应该优先清最早的缓存或最快到期的或文件大小最大的;过期缓存也有可能还是有效的,清除缓存会导致资源文件的重新拉取。

还有,浏览器,如X5,在使用缓存文件时,是没有对缓存文件内容进行校验的,这样缓存文件内容被修改的可能。

分析发现,浏览器的缓存机制还不是非常完美的缓存机制。完美的缓存机制应该是这样的:

  1. 缓存文件没更新,尽可能使用缓存,不用和服务器交互;
  2. 缓存文件有更新时,第一时间能使用到新的文件;
  3. 缓存的文件要保持完整性,不使用被修改过的缓存文件;
  4. 缓存的容量大小要能设置或控制,缓存文件不能因为存储空间限制或过期被清除。 以X5为例,第1、2条不能同时满足,第3、4条都不能满足。

在实际应用中,为了解决Cache-Control缓存时长不好设置的问题,以及为了“消灭304”,Web前端采用的方式是:

  1. 在要缓存的资源文件名中加上版本号或文件MD5值字串,如common.d5d02a02.js、common.v1.js,同时设置Cache-Control:max-age=31536000,也就是一年。在一年时间内,资源文件如果本地有缓存,就会使用缓存;也就不会有304的回包。
  2. 如果资源文件有修改,则更新文件内容,同时修改资源文件名,如common.v2.js,html页面也会引用新的资源文件名。

通过这种方式,实现了:缓存文件没有更新,则使用缓存;缓存文件有更新,则第一时间使用最新文件的目的。即上面说的第1、2条。第3、4条由于浏览器内部机制,目前还无法满足。

本文文字及图片出自 CSDN

余下全文(1/3)
分享这篇文章:

请关注我们:

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注