網頁圖片加載時間

Question

我有一個應用程序，如iPhone和Android的觸摸設備。該應用程序完全使用HTML，CSS和JavaScript構建。當應用程序加載時，它會顯示那些背景圖像設置爲近似值的空白元素。 0.5秒。經過一段時間後，這些元素被充滿圖像，這是爲什麼，因爲圖像需要時間加載到設備。

我在一個名爲images.css css文件（893 KB）所有圖像爲Base64數據URI就像你可以看到下面。

.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精靈。對於這些人看起來如何的例子，你不必比SO看起來更遠。整個頁面上的漂亮圖標來自單個圖像文件http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4，該文件被加載到具有適當高度/寬度偏移量的固定尺寸的div中，以僅顯示所需的小塊。

Answer 2

使用data：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屏幕分辨率不是很高。在優化初始屏幕之後，優化訪問者看不到的其他材料，直到他與頁面交互。

許多本領域中用於性能優化的是錯覺...數據：圖像/ PNG; BASE64，因爲它是未壓縮的是，幻象的一部分。使用html或CSS文件進行編碼時，它似乎可以更快下載。邏輯規定，如果文件大小增加，下載時間也增加。

硬邏輯是...「一個500字節的HTTP標頭請求可以採取等效時間上傳作爲HTTP的KB 10響應數據是下載」。 http://code.google.com/speed/page-speed/docs/request.html ...除非base64編碼不會爲圖像文件大小增加10KB以上，否則通過將其放入數據URI中來降低它的速度。

大型CSS的唯一用途是通過讓用戶看到一個快速初始屏幕來欺騙用戶，並說：它似乎可以快速下載？哇，他們如此迅速地將這麼多材料帶到iPhone上？答案是這是一個竅門 - 你認爲很快下載的材料被打敗了。