前端防止浏览器缓存

由于浏览器缓存的机制, 如果用户之前访问过网站, 那么浏览器会缓存该网站的css.js, 这些css. js 缓存为过期这期, 浏览器只会从缓存中读取css和js, 如果服务器上修改了 css 和js, 那么在修改用户的浏览器是不会有变化的

当浏览器发一个http请求时, 会加载各种各样的资源, 例如HTMl文档,视频,图片, css和js, 对于这些url不变的资源, 浏览器会将他们保存到本地缓存中, 下次访问相同网站是, 可以直接加载, 加速访问.

方法一: 用户可以按Ctrl+f5强制刷新网页, 或手动清除了浏览器的缓存, 此时浏览器会从服务器获取css和js 文件, 新的文化就会生效

方法二:给js标签或者LInk的src或href动态添加一个随机数,每次刷新页面都会生成一个不同的src, 此时浏览器就会把js这个js 当成新的资源向服务器发送请求, 获取资源.

<script >
    function dynamic(){
        let script = document.createElement('script'),
            Link =  document.createElement('Link');
        Link.setAttribute('rel','stylesheet');
        Link.href = 'index.css' + '?' + Math.random()
        document.head.appendChild(Link)
        script.src = 'index.js' + '?' + Math.random()
        setTimeout(()=>{
            document.body.append(script)
        })
    }
    dynamic()
</script>

原理:在资源的url后加是数字, 对于文件的加载并不会有任何影响. 但是如果数字发生改变, 浏览器就会认为这是一个全新的文件, 会重新下载缓存, 不会读取之前缓存的文件, 所以加数字的作用是强制浏览器调用新地址, 防止缓存.