Question

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

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

我把一个例子拼凑起来（是的，这很难看）。

完整图像（111kb）：

通过html / css渲染：

<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开发工具对您的小提琴进行测量的屏幕截图。

正如您所看到的，将图像分割为单独的资源是一个很好的解决方案，因为它会产生许多并发的http请求，这在相同的带宽下通常会更好。

顺便说一下，在这种情况下很难定义拇指规则，你必须根据具体情况来决定。

在这种特殊情况下，我建议使用＆＃34; many-assets-via-css＆＃34;方法

Answer 2

答案1：如果您有检查员，您可以测量任何网站负载。我建议进入谷歌浏览器，打开检查器并单击“时间轴”选项卡。在那里，刷新页面（或按下窗口左上角的记录，然后刷新），它将显示各种项目的加载时间。

例如，此页面加载时间为2.72秒。 77.11ms Loading，456.61 Scripting，191.89 Rendering，162.97绘画，163.16其他。这样您就可以看到页面最大的痛点。在这个加载这个页面的例子中，最大的痛点是脚本 - 但老实说，它只有半秒钟，所以没什么可担心的。

答案2：您的文件太小了。假设你不需要加载很多相同的例子，这是在页面上加载的唯一东西 - 不，这没关系。 115kb + CSS尺寸（通常很小）也太小，无法发现大多数现代机器的加载时间差异。如果您的图像数量超过上述示例，则问题会成倍增加。那么这取决于你所调用的独特图像数量以及你调用的重复数量。如果它仍然是很多图像，您可能希望开始组合图像并正确保存它们（小尺寸），这样就可以减少对服务器的调用。

<强>更新这是一个使用CSS的单个图标来确定钻石的丑陋示例：https://jsfiddle.net/g4stvufk/

当然，图标应该包含钻石光泽，看起来像你的

HTML

<div class="diamond">
    <img src="http://i.imgur.com/PWeXerY.png">
</div>

CSS

.diamond {
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
}
.diamond:after {
    content: '';
    position: absolute;
    left: -65px;
    top: 65px;
    width: 0;
    height: 0;
    border: 65px solid transparent;
    border-top-color: red;
}
img {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

我能给出的最好的建议是“重复使用，重复使用，重复使用”无论你能找到什么重用（如图标和光泽），都可以重复使用。

Answer 3

多个http请求通常总是比使用一个请求慢。尝试使用图像精灵 - 只有一个http请求，然后使用css在页面上定位。你甚至可以使用像Grunt或Gulp这样的构建工具为你自动化这个部分，包括使用像TinyPNG.com这样的无丢失压缩工具减少图像文件的大小（这些也可以作为你的grunt / gulp任务中的API调用包含在内） - 一个停止自动化。

什么是最慢的渲染，分离通过绝对定位绘制的图像，或完整的图像？

3 个答案: