浏览器 css 缓存 时间,更新css js同时更新客户端浏览器的缓存

3年前 (2018-11-16) | 7,062 views | 29 条评论 | 本文共963个字

朗读这篇文章

最近对主题优化比较频繁，修改完主题，其他人访问你的博客，有可能访问的是之前缓存的样式。

我们暂时不去研究浏览器的缓存过期时间，或则是更新时间，更何况不同浏览器缓存机制也有差异，像我们这种经常修改主题的博主，客户端缓存就应该由我们自己来控制，随时更新！

浏览器缓存不仅提高访问速度，也缓解服务器压力，所以不可能在页头加入no-cache, no-store之类把缓存关掉，就算这么做了，不同浏览器也未必听你的。

有人通过修改css和js的路径来更新缓存，也是不可取的，这样做每次都要去改代码，也是非常麻烦的，还有人通过修改主题名字，这样虽然可以，但是有些主题参数会丢失的。

所以最好的方式就是给js和css加入版本号，比如： ，或则css文件href="style.css?version=3.1.2这样，后面参数对css和js文件没有影响，改变版本号，客户端浏览器就会重新下载新的js或css文件，起到刷新缓存的作用。

当然，手动修改版本号也是麻烦的，最直接的就是使用时间戳作版本号，已经有人想好了代码，感谢老杨提醒，这段代码只要css和js更新，就自动更新版本号，比如：style.css?ver=1542474833。

以下是放入主题function的代码：

function theme_scripts() {

wp_enqueue_style( 'style', get_stylesheet_uri(), array() , filemtime(get_stylesheet_directory().'/style.css'));

wp_enqueue_script( 'script', get_template_directory_uri().'/zy.js', array(), filemtime(get_stylesheet_directory().'/zy.js') , true );

}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

注意代码里面的css和js地址，换成你主题的相对地址，记得删掉你之前header调用的css和js代码。

赏