Web開發：localStorage與緩存的HTTP

比方說，我有一個Web服務器，它響應GET與.json文件。對該GET的響應指定瀏覽器將響應緩存5年。Web開發：localStorage與緩存的HTTP

讓我們也說我有一個網頁，使頁面加載時的JSON數據的GET請求。當響應返回時，JSON數據將被放入localStorage。

在這一點上，如果我想要想再次檢索JSON數據，這將是更快：

從localStorage
抓取它的執行其他的Ajax GET請求（在瀏覽器將不會實際上提出請求 - 它將訪問瀏覽器緩存）

你可以用自動化測試或示例來證明它嗎？

爲什麼你的答案正確？

來源

2011-08-21 FarahBoBara

-3

如果在現代UA（瀏覽器）中這兩種方法中的任何一種應該可以忽略不計，那麼這些差異將會被忽略。

爲什麼我的回答是正確的，你問？因爲我實現了這兩種機制。

來源

2011-08-21 06:26:18

我想你是在問錯誤的問題。 在活動會話期間更快基本上是不相關的，因爲兩者都存儲在本地，並且本地查找幾乎是瞬時的（與遠程查找相比）。（需要注意的一點是，並非所有瀏覽器都依賴於緩存頭，但通常它更傾向於過度緩存，而不是緩存）。

但是，您的示例情況假定瀏覽器的緩存永遠不會被清除。這通常是錯誤的：不僅用戶每次（或者設置爲自動清除）都可以清除緩存，但瀏覽器本身可能會決定隨意刪除網站的緩存數據（通常取決於空間）。相反，您應該考慮數據的長久性以及用戶如何經常再次查找它。

如果這些信息是偶爾會訪問的內容，那麼您應該依賴瀏覽器的內置緩存機制。這允許瀏覽器在不再需要時將其移除。

但是，如果數據是定期加載或需要每次訪問該網站的東西，那麼您應該使用localStorage。本地存儲是而不是通過緩存自動清除，實際上通常只在用戶清除該網站的cookie時清空。這可以使信息保留更長時間，即使網站訪問不足以保持緩存刷新。但是你現在會突然負責維護該信息數據庫。

最後，最重要的問題是：作爲開發人員，開發更復雜的基於localStorage的解決方案是否值得呢？換句話說，你會看到最終用戶緩存1-2s查找的足夠好處，或者你是在談論大量的信息，用戶會看到30s +的增益。

作爲一個例子，對於我開發而回一個大的，複雜的web應用程序中，我使用localStorage存儲大量JS庫。當重新訪問該站點時，他們只是從本地副本中解析出來（在驗證散列之後）。這種解決方案允許大量的瀏覽器查看啓動時間的大幅減少，即使緩存已被清除。（我並不是說這是一個很好用的，但它的工作的時間。）

來源

2011-08-21 07:14:00 OverZealous

兩個消息來源聲稱，localStorage的跳動瀏覽器緩存的速度。

這是我對從localStorage的加載JavaScript文件。代碼很小，你可以在我的Github項目https://github.com/webpgr/cached-webpgr.js上查看它，或者使用下面完整示例中的代碼。

完整的庫：

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

調用庫

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){ 
    requireScript('examplejs', '0.0.3', 'example.js'); 
});

來源

2015-03-08 21:49:24 select

Web開發：localStorage與緩存的HTTP

回答

相關問題