WPO基础:浏览器缓存、条件GET请求和Expires Header


我们常常会有如下经验:我第一次访问某个网页的时候,花费了10秒钟,第二次进去的时候,5秒钟内页面就完全打开了。

为什么会这样呢?我们用浏览器访问某个图片logo.jpg作为例子来说明。我们的浏览器第一次访问网页的时候,浏览器通过互联网络向网站服务器发起一个HTTP请求。服务器得到请求后,将图片logo.jpg 反馈给浏览器。浏览器同时将logo.jpg写入浏览器缓存。

 

图:浏览器第一次访问 logo.jpg

图:浏览器第二次访问 logo.jpg

第二次访问logo.jpg的时候,浏览器会检查缓存,并且发现缓存里面存在 logo.jpg。 为了提高效率,浏览器会像服务器发送一个条件GET请求。如果logo.jpg没发生变化,服务器就会反馈一个很小的头,告诉浏览器不用从服务器下载,直接用缓存的logo.jpg就可以啦。也就是说,第二次请求 logo.jpg的时候,因为服务器反馈的不是完整的logo.jpg,而只是反馈了一个很小的头,真正的logo.jpg直接从浏览器缓存获取,所以节省了很多时间。

 

但我们观察到,在第二次访问logo.jpg的时候,浏览器和服务器之间还是有个一来一回和服务器互相喊话的过程。这个过程好像消耗不了多长时间,但如果我的网店首页有100张图片,每张图片都有一个来回,就是100个来回,也是一笔不小的时间消耗。有人会发问:

  • 浏览器是否能直接从缓存中读取logo.jpg?
  • 浏览器是否能不发送条件GET请求给服务器呢?

回答是:通过添加Expires头,就可以做到直接读取浏览器缓存,从而省掉上面的喊话过程。什么是Expires头呢?举一个例子,www.buyonme.com  首页包含LOGO图片是 logo.jpg,当我们第一次访问首页的时候,会发送一个HTTP请求logo.jpg。服务器会反馈一个HTTP响应(HTTP Response)给浏览器,告诉浏览器这个组件的过期时间。下次访问的时候,浏览器只要判断时间没有过期,就直接从缓存获取文件。

 

我们看到上图中有一行写着“Expires Tue, 01 Sep 2020 00:00:00 GMT”,这个就是Expires头。它的作用是告诉浏览器缓存,这个图片到2020年才过期。如果浏览器第二次访问这个图片,就根本不用向服务器喊话,更不用从服务器下载,而是直接读取缓存即可。如图6.33所示,定义Expires头的确省了时间。下面是包含expires header的浏览器行为:

 

后面会有系列文章,介绍如何设置Expires Headers,以及需要注意的问题。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 (TOTHETOP至尚国际  )

版权所有。转载时必须以链接形式注明作者和原始出处

如果你希望与作者交流,请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠

你可能感兴趣的:(header,缓存,expires,WPO)