html - 渲染速度最慢的是什么，通过绝对定位绘制的单独图像，还是完整图像？

Question

我的网站上有一堆现在只是 jpg 图像的“卡片”，但我正在考虑将其切换为 html/css 渲染解决方案，这需要我放置很多小图标在背景上，然后在上面添加一些时尚的文字。

问题是，我不知道如何衡量哪种方法对客户端或服务器来说更快。

我拼凑了一个例子来说明(是的，它很丑)。

完整图像(111kb):

通过 html/css 呈现:

https://jsfiddle.net/u5osqyfy/1/

<div class="wrapper">
  <img class="background" src="http://i.imgur.com/qCxyd9v.jpg">
  <img class="icon one" src="http://i.imgur.com/c5Qx3x7.png">
  <img class="icon two" src="http://i.imgur.com/4G8xUeM.png">
  <img class="icon three" src="http://i.imgur.com/9Kips1U.png">
  <img class="icon four" src="http://i.imgur.com/0utE9VD.png">
  <img class="icon five" src="http://i.imgur.com/Ej7w0pA.png">
  <img class="icon six" src="http://i.imgur.com/9EdnWnW.png">
  <div class="text">
    How do I measure how much "juice" this takes to render?
  </div>
</div>

.wrapper {
  position: relative;
}
.icon {
  position: absolute;
}

.icon.one {
  left: 10px;
  top: 20px;
}

.icon.two {
  left: 140px;
  top: 20px;
}

.icon.three {
  left: 270px;
  top: 20px;
}

.icon.four {
  left: 400px;
  top: 20px;
}

.icon.five {
  left: 140px;
  top: 150px;
}

.icon.six {
  left: 270px;
  top: 150px;
}

.text {
  position: absolute;
  left: 120px;
  top: 350px;
  font-size: 24px;
  color: white;
  text-align: center;
  max-width: 300px;
}

背景为 73 kb，图像各为 7kb，总共 73 + 42 = 115 kb。

但是有时候有几个图标是一样的，这会降低原始kbs的总数，那么就成了定位成本多少的问题......

我如何着手实际衡量什么是最好的？因为我认为这是一个没有固定答案的问题，而是需要根据具体情况进行审查的问题。

那么，1) 我该如何衡量呢？

或

2)能不能直接说没多大关系？

Answer 1

这是我使用 Chrome 开发工具对你的 fiddle 进行测量的屏幕截图。

如您所见，将图像分割成单独的 Assets 是一个很好的解决方案，因为它会导致许多并发的 http 请求，这通常在相同的带宽下更好。

顺便说一句，在这种情况下很难定义经验法则，您必须根据具体情况做出决定。

在这个特定场景中，我会建议使用“many-assets-via-css”方法。