與Basket.js腳本緩存，我做錯了什麼？

Question

我試圖使用腳本緩存來存儲腳本localStorage。在這種情況下，我正在嘗試由Addy Osmani和其他人創建的Basket.js。性能對於它可以工作的情況非常棒，但問題在於它不像我期望的那樣工作，但說實話，也許它工作正常，而且我不瞭解腳本緩存背後的基本原理。因此，讓我描述我如何使用它：

首先，我設置了標記：

<script src="/framework/plugins/base/basket.js"></script> 

然後，附上我在下面的塊中的所有腳本：

<script>basket.require({url:'/framework/plugins/base/jquery-2.1.1.js',expire:168},{url:'/framework/plugins/base/jquery.ui-1.10.4.js',expire:168},{url:'/framework/plugins/forms/dropzone/dropzone.js',expire:168});</script> 

當我打開我的測試頁面，一切正常，除了刷新文檔時的事實。一旦它被緩存...閃光！它工作得很好，但我的問題是腳本緩存本身。我總是必須刷新文檔以查看其效果。

老實說，我認爲腳本緩存將腳本存儲在localStorage中，並執行它們，所以你可以得到兩全其美的效果。但是，似乎並不是這樣。

我做錯了什麼，或者它是任何腳本緩存模型是這樣的嗎？總是在第二次運行？

Answer 1

你說的「你必須刷新文檔才能看到它的效果」是正確的。從我的理解緩存只發生在第一次加載資源之後。簡單地說basket.js會看到jquery是必需的，並且會將其緩存在localstorage中。然後用於從客戶端加載腳本，並通過這樣做來減少後續加載時對jquery服務器的資源請求。這加快了重複加載時的頁面加載時間，因此刷新時的響應時間更快。

沒有將資源加載到客戶端，最初basket.js無法將腳本緩存到localstorage。

關於瀏覽器緩存機制及其實現的基本解釋可以參見here。也就是說，如果您希望加快頁面初始加載時的資源加載時間，我建議您使用內容分發網絡（CDN）服務。