隨著網站運營時間的增長,前臺js css文件將會越來越多,這樣就會導致前臺的緩存也越來越大,造成頁面的加載變得很慢,影響用戶體驗。
因此,我們需要清除前臺的js css緩存。下面介紹兩種方法:
第一種方法:
<link rel="stylesheet" type="text/css" href="css/style.css?v=1.0" />
<script type="text/javascript" src="js/main.js?v=1.0"></script>
在引入js css文件的時候,我們可以在文件的后面加一個版本號,這樣每次文件更新都會有新的版本號,瀏覽器會識別為新的文件,從而清除原來的緩存。
第二種方法:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/main.js"></script>
function clearCache() { var links = document.getElementsByTagName('link'); for(var i = 0; i < links.length;i++) { var href = links[i].getAttribute('href'); if (href && href.indexOf('.css') > -1) { var newHref = href + "?v=" + new Date().getTime(); links[i].setAttribute('href', newHref); } } var scripts = document.getElementsByTagName('script'); for(var i = 0; i < scripts.length;i++) { var src = scripts[i].getAttribute('src'); if (src && src.indexOf('.js') > -1) { var newSrc = src + "?v=" + new Date().getTime(); scripts[i].setAttribute('src', newSrc); } } }
上面是一段清除緩存的js代碼,通過遍歷所有的js css文件,然后在文件的后面加上一個時間戳作為版本號,從而清除緩存。
兩種方法都可以清除前臺的js css緩存,但推薦采用第一種方法,因為第二種方法需要在每次文件更新后手動觸發清除緩存的函數。
上一篇css選擇器 奇偶項
下一篇前端css代碼真的頭疼