如何解決前端開發中的緩存問題


  現在的大多數瀏覽器都有緩存機制,目的是減少客戶端的訪問次數,減輕服務器的壓力。但是在開發工程中或者是版本更新過程中,緩存機制的存在會使得程序版本已經更新,但是效果不能出現的狀況,需要開發人員頻繁的清除緩存,並不友好,特此總結以下幾種方式(以谷歌為例),僅供參考,如有雷同,不甚榮幸。

1.對於開發者來說,只需要關閉瀏覽器緩存就可以了。步驟是:瀏覽器右鍵打開檢查,找到network,下邊有Disable cache選項,只要將其打勾即可

2.開發者可以關閉緩存,但是並不能要求所有用戶都進行此類操作,此時可以在引用的文件之后拼接隨機數或者日期都可以,瀏覽器就會認為是新的請求,而不會使用緩存中的文件,具體如下(只演示大概思路,具體使用,具體修改):

 1 function loadFile(arr) {
 2     let now = new Date();
 3     let timestamp = "?t=" + now.getTime();
 4     let head = document.getElementsByTagName("head")[0];
 5 
 6     if(arr) {
 7         arr.forEach(el => {
 8             let endStr = el.slice(-3);
 9             if(endStr === '.js') {
10                 let sc = document.createElement("script");
11                 sc.type = "text/javascript";
12                 sc.src = "../js/"+el + timestamp;
13                 head.appendChild(sc);
14             } else if(endStr === 'css') {
15                 let link = document.createElement("link");
16                 link.type = 'text/css';
17                 link.rel = 'stylesheet';
18                 link.href = "../css/"+el + timestamp;
19                 head.appendChild(link);
20             } else {
21                 console.log(el + "鏈接無法識別");
22             }
23         })
24     }
25 }
26 $(function(){
27     var js_arr=["alert.js","alert.css"];
28     loadFile(js_arr);
29 });


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM