Ipad网站图像性能和内存 [英] Ipad website image performance and memory

问题描述

在iPad Safari上，将图像作为CSS背景图像包含还是使用html标签更好？
你有关于它的任何资源吗？

谢谢

解决方案

我刚在iPad Safari上运行了的要求

On iPad safari, is it better to include images as CSS background images or use the html tag ? Do you have any ressources about it ?

thanks

解决方案

I just runned this test on my iPad Safari. And looks like CSS is faster.

Try it yourself on you iPad.

3 tests: Image tag src:

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

CSS Background

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

Image tag src without onLoad

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

Here I got the following result:

Image tag src: 5,369 Operations/Sec.

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

Image Tag Src (without OnLoad): 2,757 Op/S.

BTW, this test was not created by me.

Edit: As pointed to me, I did a new test to test the performance in another way.

To be more consistent, I tried to see each solution in a different way. I used the following code.

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++;
  }
}

note 1: Im using z-Index so the new add element is always on top.

note 2: Im loading different imgs so the browser doesnt cache.

note 3: I know that I tested it on a common browser. Although, we can see its behavior and discover what to expect in the iOS/Safari.

Here's what happened.

Memory: Both solutions kept the resource in the same way. So theres no different in memory.

Calls: Both solution called the same amount of paint and load. Although, the IMG always called an event. Even when I explicitly put "onload = null;".

Here's is the calls for DIV

Here's the calls for IMG

这篇关于Ipad网站图像性能和内存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！