Chrome每帧都会对大图像进行解码

Question

我正在尝试做一些交互式地图，我正在使用两个非常大的图像（3200x800和4096x1024像素）。问题是，Chrome每帧都会用云解码图像...因此性能非常差（例如在代码段中）。

发现类似的问题here，但没有帮助。我在Linux Mint 17.1（64位）上使用Chrome 43（64位）。我也试过Firefox而没有问题...

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

div {
  position: absolute;
  width: 3200px;
  height: 1800px;
  background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg');
  animation: clouds 200s linear infinite;
  transition: 5s;
  left: 0;
  top: 0;
}

@keyframes clouds {
  from { background-position: 0 0, left top; }
  to { background-position: 4096px 0, left top; }
}

body:hover > div {
  left: -500px;
  top: -250px;
}

<div></div>

Answer 1

使用伪元素和转换仍然使用大量CPU，但它更加平滑。它绝对消除了图像解码。

我认为Chrome正在为div背景使用单个缓冲区。当您更改此缓冲区中2个图像的相对位置时，它将变为无效并且必须再次进行解码。可能FF可以为每个图像分配一个中间缓冲区，即使在相同的背景中使用

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

div {
  position: absolute;
  width: 3200px;
  height: 1800px;
  background: url('http://i.imgur.com/zUkgN3j.jpg');
  transition: 5s;
  left: 0;
  top: 0;
  background-position: left top;
  transform: translateZ(0px);
}

div:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('http://i.imgur.com/p1Jf722.png');
  animation: clouds 200s linear infinite;
  transition: 5s;
  left: 0;
  top: 0;
  transform: translateZ(0px);
}


@keyframes clouds {
  from { background-position: 0 0; }
  to { background-position: 4096px 0; }
}

body:hover > div {
  left: -500px;
  top: -250px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这里可能有多种方法可以提高性能，但最低级别的结果只是通过向div添加非扭曲变换来将所有内容卸载到GPU上。瞧，没有更多的图像解码。

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
}

div {
  position: absolute;
  width: 3200px;
  height: 1800px;
  background: url('http://i.imgur.com/p1Jf722.png'), url('http://i.imgur.com/zUkgN3j.jpg');
  animation: clouds 200s linear infinite;
  transition: 5s;
  left: 0;
  top: 0;
  transform: translateZ(0);
}

@keyframes clouds {
  from { background-position: 0 0, left top; }
  to { background-position: 4096px 0, left top; }
}

body:hover > div {
  left: -500px;
  top: -250px;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;