Ipad網站圖片性能和內存

在iPad Safari上，將圖片包含爲CSS背景圖片還是使用html標籤會更好？你有什麼資料嗎？Ipad網站圖片性能和內存

感謝

2013-08-01 arlg

我只是拼命地跑在我的iPad上的Safari this測試。看起來像CSS更快。

在iPad上自己試試。

3測試：圖片標籤SRC：

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

CSS背景

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

圖片標籤SRC沒有的onLoad

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

在這裏我得到了以下結果：

圖片標籤src：5,369 Operations/Sec。

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

圖片標籤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 enter image description here

調用下面是IMG enter image description here

來源

2013-08-01 17:12:51 wendelbsilva

謝謝，我得到了同樣的結果。如果我瞭解它是圖像加載操作，但之後是內存中的圖像佔用更多的空間與標記？並與垃圾收集器一起被刪除？ – arlg

什麼是「5,36」？這些數字沒有意義... – dandavis

@dandavis你是對的，這個數字應該是5,369。網站jsPerf保存所有測試的信息，因此我們可以去那裏檢查所有測試的情節。 – wendelbsilva

不能直接答覆來電，但由於同時尋找其他人可能會在這裏結束，我想我會分享一些見解：

我在png中有一個相當大的css-sprite，在ipad上表現相當糟糕。從png轉換爲jpg對渲染性能有很大影響（效果更好）。似乎有一些提示，爲什麼在此頁上：https://gist.github.com/KrofDrakula/3639830

來源

2013-11-25 12:34:04 troelskn

Ipad網站圖片性能和內存

回答

相關問題