假設我們有幾個不同的網站:website1.com,website2.com,website3.com。我們在所有這些應用程序上使用jQuery,並將其包含在CDN中,如googleapis.com。瀏覽器的預期行爲是緩存一次,並將其用於所有其他網站。 Chrome似乎這樣做,但Safari爲每個域下載jQuery。Safari不會緩存跨不同域的資源
例
- 隨着鉻下面開放nytimes.com,bbc.com和dw.de給定的JS代碼。
- 在第一個網站上追加jQuery並查看DevTools的Network選項卡。它會說它有jQuery。
- 現在打開任何其他網站並再次追加jQuery - 答案將是「從緩存」。
但是,Safari會說它爲每個域加載jQuery,但是嘗試在其中一個域上打開任何網頁並再次追加腳本 - 現在您會看到它說它從緩存中獲取了jQuery。因此,它看起來像緩存域的數據,即使它已經從另一個域的確切URL下載了一個資源。
這個假設是否正確,如果有,如何解決?您可以複製
代碼/粘貼:
setTimeout(function() {
var SCRIPT_SRC = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = SCRIPT_SRC;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}, 0);
UPD:一張靜態圖片進行了測試。
test.com,test2.com和test3.com有<img src="http://image.com/image.jpg" />
。在除Safari訪問日誌之外的所有瀏覽器中,只顯示一個圖片的請求。 Safari爲每個新域獲取圖像(但不是子域)。
我不確定我會相信這樣的測試,你手動注入jQuery。瀏覽器可能會處理這些不同於頁面本身包含的頁面。 – ceejayoz
@ceejayoz如果它會是js代碼,異步追加jQuery?這個通過DevTools追加的內容不應該有任何不同。 –
如果緩存有時在通過webdev工具進行操作時被繞過,那對我來說就不足爲奇了。我建議在將其視爲問題之前消除潛在的原因。你甚至可以在StackExchange網絡上測試它 - 去幾個站點,看看共享的靜態資產是否跨域緩存。 – ceejayoz