網頁圖像加載時間

Question

我有iPhone和Android等觸控設備的應用程序。 該應用程序完全使用HTML，CSS和JavaScript構建。 當應用程序加載時，它會顯示那些背景圖像設置為大約的人的空白元素。 0.5秒 一段時間后，這些元素被圖像填充，這就是為什么因為圖像需要時間來加載到設備。

我在css文件中將所有圖像都作為Base64數據URI命名為images.css（893 KB），如下所示。

.icon { background-image: url(data:image/png;base64,bytes.....; }
.img1 { background-image: url(data:image/png;base64,bytes.....; }
.img2 { background-image: url(data:image/png;base64,bytes.....; }
.img3 { background-image: url(data:image/png;base64,bytes.....; }

該應用程序可以工作，但圖像大約是60秒，如何在顯示視圖之前預先加載它們？ 或者我如何測試是否加載images.css文件以確保圖像全部加載？

Answer 1

這是一個相當龐大的CSS文件。 Base64在空間方面效率極低，因此您可以通過使用正確的圖像文件來加快速度，如果需要，可以使用CSS sprites。 有關這些外觀的示例，您不必看起來比SO本身更遠。 整個頁面上的漂亮圖標來自單個圖像文件http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4 ，它被加載到具有適當高度/寬度偏移的固定大小的div中以顯示只需要小塊。

Answer 2

使用數據的好處：image / png; base64是為了減少對許多小文件的服務器請求。 IE 20小圖像意味着一次限制為幾個連接的20個http請求。

您可以使用url（data：image通過消除這些請求來加速性能，或者在某些情況下組合圖像並使用css剪切邊緣以獲得正確的背景元素，或者在某些情況下最好將大圖像拆分起來，因為這樣做他們可以縮小到更小的圖像。

然而，這兩種方法都不是一種始終提高性能的神奇子彈 有一些權衡可以使優化成為一種藝術形式。 如果你的images.css是100K並且包含20或30張圖像，你可能會看到並改進。

如果我在你旁邊工作，我會問自己的第一個問題是。 在訪問者與頁面交互之前，頁面上使用了哪些圖像？ 性能優化也像幻覺表現。 如果頁面幾乎立即被繪制並且頁面響應於移動那么幻覺已經完成 - 即使實際上在幕后仍有鼠標懸停在對象上。

您可以在幕后下載多少內容？

http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS

拍攝您需要顯示的圖像，以顯示該大型CSS文件中的頁面。 這是大的方法，你能在服務器上壓縮嗎？

識別出立即渲染初始屏幕所需的圖像，Iphone屏幕分辨率不是那么高。 在優化初始屏幕之后，優化訪問者在與頁面交互之前看不到的其余材料。

很多優化性能的藝術都是幻覺......數據：image / png; base64因為它是未壓縮的，是幻覺的一部分。 當在html或CSS文件中編碼時，它似乎下載速度更快。 邏輯規定，如果文件大小增加，則下載時間也會增加。

硬邏輯是......“一個500字節的HTTP頭請求可能需要相同的上傳時間，因為需要下載10 KB的HTTP響應數據。” http://code.google.com/speed/page-speed/docs/request.html ...除非base64編碼不會將超過10KB的內容添加到圖像文件大小，而是通過將其放入數據中來減慢速度URI。

CSS的唯一用途就是欺騙用戶，讓他看到一個快速的初始屏幕並說：它似乎快速下載？ 哇，他們怎么這么快就把這么多材料放到了iphone上？ 答案是這是一個技巧 - 您認為快速下載的材料是推遲的。