2013-07-10 91 views
3

我正在構建一個網絡應用程序來瀏覽本地服務器上的大圖片。谷歌瀏覽器從緩存中加載圖片比下載速度慢

奇怪的是,Chrome載入圖像窗體緩存需要花費太多時間,甚至遠遠不止從本地服務器上下載。

每張照片大概是5Mb,而Chome不需要花費大約200ms的時間,但是從緩存中花費大約400ms。

下面是截圖: enter image description here

我的環境是Mac OSX版10.8.4,我已經測試了PC-它的成本約700毫秒。

這是test on jsfiddle

我在網上找不到具有這種尺寸的圖像,因此您可能需要fiddle2或Charies將這些圖像映射到您自己的本地圖像。並重寫頭,讓Chrome對其進行緩存:

Expires:Wed, 17 Jul 2013 01:50:08 GMT 
Cache-Control:max-age=604800 
Connection:keep-alive 
Date:Wed, 10 Jul 2013 07:33:51 GMT 
Last-Modified:Wed, 10 Jul 2013 01:13:26 GMT 
+0

順便說一句,我的firefox工作得更好,safari是最好的。 – ipoly

+0

今天我做了一些小圖片的測試,大約800Kb,大小相同(2000x3000),我用css不透明度切換圖片而不是src。 它仍然很慢。 最後,我使用CSS顯示切換圖像,它看起來更好。 所以我認爲問題在於Chrome的圖形性能。 – ipoly

回答

0

不是超級有用的,但我解決這個問題是編碼的圖像作爲數據的URI。複製圖像(像我這樣做)或從緩存中拉出大約10-50ms。

如果你通過AJAX加載你的圖片,那麼你必須注意CORS的問題,但是如果你在加載它們服務器端,你只需要弄清楚你是否可以內聯它們而不會讓你的頁面加載時間過長。