Ipad網站圖像性能和內存

Question

在iPad Safari中，將圖像作為CSS背景圖像包含還是使用html標簽更好？ 你有任何關於它的資源嗎？

謝謝

Answer 1

我剛剛在iPad Safari上運行了這個測試。 看起來CSS更快。

在iPad上自己試試吧。

3個測試：圖像標簽src：

img.onload = loadHandler;
img.src = getUrl();

CSS背景

bg.style.background = "url('" + getUrl() + "') no-repeat";

沒有onLoad的圖像標簽src

img.onload = null;
img.src = getUrl();

在這里我得到以下結果：

圖像標簽src：5,369操作/秒。

CSS background-image：19,554 Op / S.

Image Tag Src（不含OnLoad）：2,757 Op / S.

順便說一下，這個測試不是我創造的。

編輯：正如我所指出的，我做了一個新的測試來以另一種方式測試性能。

為了更加一致，我試圖以不同的方式看待每個解決方案。 我使用了以下代碼。

var count = 1;
function add(){
  var p = document.getElementById("parent");
  if (false){
    var d = document.createElement("div");
    p.appendChild(d);
    d.style.background = "url('" + getUrl() + "') no-repeat";
  } else {
    var d = document.createElement("img");
    p.appendChild(d);
    d.onload = null;
    d.src = getUrl();
  }
  d.style.position="absolute";
  d.style.top=0;
  d.style.left=0;
  d.style.zIndex=count;
  d.style.width=256;
  d.style.height=256;
}
function getUrl() {
  var base = "http://a.tile.openstreetmap.org/16/";
  base += count + "/" + count + ".png";
  return base;
}   
function init(){
  while(count <= 10){
    add();
    count++;
  }
}

注1：我使用z-Index，因此新的添加元素始終位於頂部。

注意2：我加載不同的imgs，因此瀏覽器不會緩存。

注3：我知道我在一個普通的瀏覽器上測試過它。 雖然，我們可以看到它的行為並發現在iOS / Safari中會發生什么。

這是發生了什么。

內存：兩種解決方案都以相同的方式保留資源。 所以記憶中沒有什么不同。

調用：兩種解決方案都稱為相同數量的油漆和負載。 雖然，IMG總是稱之為事件。 即使我明確地把“onload = null;”。

這是DIV的調用

這是對IMG的呼吁

Answer 2

不是直接答案，但由於其他人可能會在搜索時結束，我想我會分享一些見解：

我在png中有一個相當大的css-sprite，在ipad上表現得相當糟糕。 從png切換到jpg對渲染性能產生了巨大影響（越好）。 在這個頁面上似乎有一些提示： https ： //gist.github.com/KrofDrakula/3639830