部署浏览器缓存

第一部分 – 第06章

Website

当初次访问的用户通过浏览器请求移动网站页面时，在网页能够成功显示前，浏览器需要下载所有组成网站的资源文件。

一个浏览器缓存资源文件的示例

例如，浏览器在完成网页加载前必须先加载所有8个资源文件。

如下显示了本例中网站页面的编码。 

<head>
<link rel="stylesheet" href="http://css.example.com/style.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2.css" />
<script src="http://js.example.com/script.js"></script>
<script src="http://www.example-2.com/script2.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1.png"></div>
<div><img src="http://images.example.com/image-2.png"></div>
<div><img src="http://images.example.com/image-3.png"></div>
<div><img src="http://www.example-2.com/image-4.png"></div>
<!-- Some More Page Content -->
</body>

考虑如下的几个场景：

  • 该用户可能会持续浏览网站上的众多其他网页。这些网页与用户初次访问时已经浏览过的网页使用相同的资源文件（比如共用一个JavaScript文件，共用一个CSS文件，共用一些图片，等等）。
  • 也许该用户只浏览完一个网页就已经离开了，但他/她也可能会在不久的将来再次访问你的网页。

缓存资源文件

使资源文件可缓存，将避免从服务器上通过不必要的http请求重复获取相同的资源文件，而且在某些情况下你的移动网站页面能更快加载。当资源文件缓存后有如下好处：

  • 当该用户持续浏览众多其他页面时，用户的计算机上便会缓存资源文件，且这些资源文件并不需要通过网络服务器获取。
  • 当该用户不久后再次访问同样的页面时，资源文件会直接从用户的计算机缓存加载，而不是从网络服务器加载。

一旦你网站部署了资源文件缓存后，用户访问网页时，跟网页相关的资源文件就会被缓存到用户的计算机上。使用到缓存的都会是不常需要变更的静态文件（资源文件），例如图片文件，CSS文件，JavaScript文件，等。

当你的移动网站启用浏览器缓存后，用户在网站的第一次页面浏览并不会获益。当用户再次访问网页并需要使用到已缓存过的资源文件时，启用缓存的好处便会展现。

缓存文件（Cache File）的详细说明

通过使用expires-header或者cache-header，网络服务器能告诉浏览器应该给单个文件或多个相同类型的文件做缓存，并且提供缓存的过期日期和时间。 

Expires: Thu, 15 May 2019 22:00:00 GMT

注意，以上expires-header是被设定到具体的某个日期和某个时间，这样会导致一个问题。你以后将会必须定期检查过期日期和时间，或者在下一次失效前必须更新这个日期和时间。

如上例，如果一旦到了截止日期2019年5月16日，你忘了更新expires-header中的过期日期和时间，那么当天及以后浏览器将不再针对非首次访问的用户提供缓存的资源文件。

Cache-header（缓存header）

每种web服务器的浏览器缓存设置都是不同的。

浏览器缓存的设置是web服务器的特性。在如下示例中我们将使用cache-header（缓存头）方法。

  • 你必须通过web服务器的配置项部署浏览器缓存。
  • 假定你使用的是Apache或Nginx作为web服务器，你可以参考如下的指示说明完成配置的部署。

要被缓存的文件或文件类型

你必须决定将要针对哪些类型的文件启用缓存以及启用多久。需要被启用浏览器缓存的文件类型包括如下几种：

  • 如*.jpg， *.png，*.gif等的图片类型，以及如*.ico的图标类型。这些类型的文件一旦首次被上载到网站服务器，便很少再做改动。针对它们的浏览器缓存可以设置得尽可能久，比如1至2年。
  • CSS类型文件的浏览器缓存可以被设置为至少3至6个月，因为它们相比图片和图标类型而言，改动更频繁。它们主要影响移动网站的页面可视化布局。
  • JavaScript (JS)类型文件的浏览器缓存可以被设置为至少3至6个月，因为它们相比图片和图标类型而言，改动更频繁。它们主要影响移动网站的页面用户交互和用户数据跟踪。

Apache浏览器缓存

为Apache服务器启用浏览器缓存，就要添加如下代码到.htaccess文件。这段代码使用cache-control header（缓存控制头），它是一个HTTP头，能给浏览器指定需要被缓存的文件和文件类型和缓存的时间长度。

  • 缓存控制指令在filesMatch起始和结束标签中被指定。
  • 浏览器缓存的文件类型由”.(css|js)$”和”.(jpg|jpeg|png|gif|bmp|ico)$”指定。第一套缓存控制指令指定了CSS和JS文件类型，第二套缓存控制指令制定了jpg、jpg、png、gif、bmp、ico文件类型。
  • max-age指令定义了浏览器对于符合指定文件类型的文件必须缓存的时间长度。在如下示例中，”max-age=2628000″和”max-age=31536000″意味着相应指定的文件类型将会被缓存1个月和1年。max-age指令的值是以秒表达的。
  • public指令是指所指定的缓存文件类型被启用为公共缓存。如果移动网站要启用浏览器缓存，就必须采用public指令。 
# Cache css and js files for 1 month
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>
# Cache image files for 1 year
<filesMatch ".(jpg|jpeg|png|gif|bmp|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>

你可以对不同的文件类型设定不同的max-age值，一般为：

  • max-age=60指浏览器缓存大约1分钟。
  • max-age=3600指浏览器缓存大约1小时。
  • max-age=86400指浏览器缓存大约1天。
  • max-age=604800指浏览器缓存大约1周。
  • max-age=指浏览器缓存大约1月。
  • max-age=指浏览器缓存大约1年。

Nginx浏览器缓存

你可以通过在Nginx服务器中添加如下代码来启用浏览器缓存。

  • 这段代码引导浏览器缓存”jpg”，”jpeg”，”png”，”gif”，”ico”，”css”及”js”类型的文件。
  • “expires 100d”意味着每个文件必须缓存100天。 
location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 100d;
}

浏览器缓存问题

如果你为资源文件配置了较长的缓存时间（例如1年），且你在缓存过期前对移动网站页面进行了更改，你的用户可能无法看到变更的内容（即新版本资源文件）。这是因为直到已缓存的资源文件过期，提供给用户的仍然是旧版本的缓存资源文件。

最好的解决方案就是更改这些资源文件的文件名称。例如：

  • 将所有的JavaScript文件名称更改为”filename-new.js”。
  • 将所有的CSS文件名称更改为”filename-new.css”。
  • 将所有的图片文件名称更改为”filename-new.png”。

将文件名的更改应用到示例中，网页代码如下： 

<head>
<link rel="stylesheet" href="http://css.example.com/style-new.css" />
<link rel="stylesheet" href="http://www.example-2.com/style2-new.css" />
<script src="http://js.example.com/script-new.js"></script>
<script src="http://www.example-2.com/script2-new.js"></script>
</head>
<body>
<!-- Page Content -->
<div><img src="http://images.example.com/image-1-new.png"></div>
<div><img src="http://images.example.com/image-2-new.png"></div>
<div><img src="http://images.example.com/image-3-new.png"></div>
<div><img src="http://www.example-2.com/image-4-new.png"></div>
<!-- Some More Page Content -->
</body>

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Implement Web Browser Caching – 繁体中文版：部署浏览器缓存






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book