0

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

谢谢

4

2 回答 2

2

我刚刚在我的 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();

在这里，我得到了以下结果：

图片标签来源：5,369 次操作/秒。

CSS 背景图像：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，所以新的 add 元素总是在顶部。

注意 2：我正在加载不同的 img，因此浏览器不会缓存。

注3：我知道我在普通浏览器上测试过。虽然，我们可以看到它的行为并发现在 iOS/Safari 中会发生什么。

这就是发生的事情。

内存：两种解决方案都以相同的方式保持资源。所以在记忆中没有什么不同。

调用：两种解决方案都调用了相同数量的油漆和负载。虽然，IMG 总是调用一个事件。即使我明确输入“onload = null;”。

这是对DIV的调用 在此处输入图像描述

这是IMG的电话 在此处输入图像描述

于 2013-08-01T17:12:51.500 回答
0

不是直接的答案，但由于其他人在搜索时可能会在这里结束，我想我会分享一些见解：

我在 png 中有一个相当大的 css-sprite，它在 ipad 上的表现相当糟糕。从 png 切换到 jpg 对渲染性能（更好）产生了巨大影响。这个页面上似乎有一些关于为什么的提示：https ://gist.github.com/KrofDrakula/3639830

于 2013-11-25T12:34:04.037 回答