Chrome每帧解码大图像

Question

我正在尝试制作一些交互式地图，其中我使用了两个非常大的图像（3200x800 和 4096x1024 像素）。问题是，Chrome 解码图像时每帧都带有云彩……所以性能真的很差（例如 sn-p）。

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

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

使用伪元素和transform仍然会占用大量CPU，但还是比较流畅的。它绝对消除了图像解码。

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

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

<div></div>

Answer 2

这里可能有多种方法可以提高性能，但最简单的方法就是通过向 div 添加不失真的变换将所有内容卸载到 GPU 上。瞧，没有更多的图像解码。

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

<div></div>