HTML页面缓存内容清理

2024年5月22日 102次阅读 来源: jiuyisir

  在HTML页面更新后浏览器存在大部分时机影响更新页面的使用，非技术人员根本意识不到内容是否有更新，绝大部分的人使用浏览器访问网页也没有打开网页要强制刷新（Ctrl + F5）网页的习惯保证获取到最新网页信息；
  本人最近也是在处理HTML页面修改后环迅清理不掉，更新受阻，一直显示旧页面；经过一些查证现就全面清理HTML页面缓存做出几点总结，记录在此方便后续温习回顾。
  对于一个HTML页面，常见的缓存分三部分即页面内容、CSS样式文件和JS文件。 下面就这基础的三部分分别列出解决办法；仅供参考，有不全面请各位大佬指正！！！

1.页面内容缓存清理
<!-- 在HTML的head标签里添加如下代码即可 -->
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
2.js和css文件缓存清理
<!-- 常规代码如下所示 -->
<link rel="stylesheet" href="../css/base.css" />
<script src="../scripts/common.js" type="text/javascript" charset="utf-8"></script>
<!-- 添加版本参数用于文件刷新 -->
<link rel="stylesheet" href="../css/base.css?v=20200318" />
<script src="../scripts/common.js?v=20200318" type="text/javascript" charset="utf-8"></script>

  这样只要在每次修改之后改一下版本号即可，也可以通过document.write，或者其他动态加载JS的框架来更新参数数据。如下所示：

<script>
    document.write("<s" + "cript type='text/javascript' src='/js/commen.js?+new Date().getTime()'"+"></scr"+"ipt>")
</script>
3.用随机数，随机数也是一种促进更新缓存的一种很不错的方法
<script>
    document.write("<s" + "cript type='text/javascript' src='/js/commen.js?+Math.random()'"+"></scr"+"ipt>")
</script>

其他的类似，只要在需要更新的文件后加上 + Matn.random()参数即可；注意：因为Matn.random()只能在JavaScript下才起作用，故只能通过JavaScript的调用才有效。

    原文作者：jiuyisir
    原文地址: https://blog.csdn.net/jiuyisir/article/details/104942842
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞