Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

静态资源开启Cache后的更新同步

  使用缓存确实可以让网页性能得到很大提升,但是开启Cache后资源将就不再向服务器发起请求,只有等到缓存时间到或用户的一些特定操作才会重新发起请求。这样就会造成这些资源无法与服务器的版本同步。所以需要找到一种穿过这些顽固缓存同步更新资源的办法。
  虽然我们通常只对静态资源开启Cache,但静态资源也不是万年不变的。比如CSS、JS,以及一些HTML模板。一旦这些资源产生变化,前端要是来不及同步就会看到奇怪的页面。那么,如何在服务器对这些资源更新时同步到客户端呢?服务器当然无法主动向客户端推送自己的变化(即使可以实现成本也太高了),但我们可以通过动态页面来维护这些资源的最新状态。动态页面是不开启Cache的,它总是会向服务器发起请求。而那些资源是被动态页面所使用的,所以在动态页面上做一些处理完全可以控制资源的版本。
  其实,我们应该为每一个不同的资源分配一个不同的URL。当一个文件被编辑后,我们得到的就是一个新的文件。虽然文件名与原本相同,但内容、最后编辑时间,等一些其它参数就会变化。我们一直以文件名作为URL的基准,就是这里出了问题。如果用文件MD5或带最后编辑时间的文件名来作为URL就不会有这样的问题。当文件被修改时,动态页面所需的资源就与原先不同了,客户端自然不会去访问旧版本的静态资源。
  依然沿用上一篇文章中的例子:
<!--test.php-->
<script src="header.php?v=<?=filemtime('header.php')?>"></script>
我是网页的动态内容 - 当前时间:<?=date('Y-m-d H:i:s')?>
<!--header.php-->
<?
header('Cache-Control: max-age=86400');
header('Content-Type: application/json');
ob_start();
?>
<h1>我是网页的头部分!</h1>
<?='document.write('.json_encode(ob_get_clean()).');';?>
  这里给请求的资源后面加上它的最后编辑时间来作为URL,一旦这个资源被编辑,页面需要的就是新的资源,即使旧的资源依然被Cache也会对新的资源发起请求。再也不用纠结Cache无法同步的问题。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^