网站在开发以及上线测试时会涉及到频繁的css、js、图片的修改。这时开发者会希望测试者或者客户看到的是最新版的网站。

这里要讲的方法是，给资源文件（js、css、图片）设定版本号。告诉浏览器，虽然资源文件名是一样的，但是版本不一样了，所以需要重新加载这些文件。

如下所示：

<link rel="stylesheet" href="style.css?v=20200327">
<script src="script.js?v=20200327"></script>
<img src="image.jpg?v=20200327" alt="">

上例中?v=的是v是参数，所以可以随便设定。可以是 ?ver=、 ?version=、 ?update= 等等。能看懂就行。

详解目录:

HTML网站设定版本号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        document.write('<link rel="stylesheet" href="style.css?v=' + new Date().getTime() + '">');
// new Date().getTime() 返回当前时间戳
        document.close();
        document.write('<script src="script.js?v=' + new Date().getTime() + '"><\/script>');
    </script>
    <title>Demo</title>
</head>

<body>
    <script>
        document.write(' <img src="picture.jpg?v=' + new Date().getTime() + '" alt="">');
    </script>
</body>

</html>

这个方法感觉怎么样？
我感觉太恶心了。如果换成是我，我宁可手动设置版本号。

WordPress网站设定版本号

wordpress提供了很好的函数可设置版本号。比如在functions.php中的enqueue中设置。

wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', array(), time());
wp_enqueue_script('js', get_stylesheet_directory_uri() . '/js/script.js', array(), time(), true);

上面的time()就是返回一个时间戳。版本号就是当前的时间戳。
但是这样几乎是每秒都是更新版本号，理论上问题不大，但是每次访问，访问每个页面时样式都是重新加载的。肯定没有缓存性能好。

所以我们可以把time换成date(‘YmdH’)，就是每一个小时换一个版本号。 date(‘YmdHi’)就是每分钟换一个版本号。

 

图片设置版本号：

<img src="picture.jpg?=<?php echo date('YmdHi'); ?>" alt="">

php网站设定版本号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <link rel="stylesheet" href="/style.css?ver=<?php echo date('YmdHi'); ?>" type="text/css" media="all" />
    <script src="/js/script.js?ver=<?php echo date('YmdHi'); ?>"></script>
</head>

<body>
    <img src="picture.jpg?=<?php echo date('YmdHi'); ?>" alt="">
</body>

</html>

缓存设置相关文章：

https://10.1pxeye.com/set-cache-control/