小图与大图（重复时）的区别

Question

4

我正在制作一个跨越整个网页的栏（类似于hr标签）。出于好奇，是不是最好创建尽可能小的图像在X轴上重复或者是最好创建半宽度的图像，这样就不需要重复太多次了？

- Freesnöw

你试图优化什么？我认为它几乎不会占用 CPU（即：几乎没有），而且通常由于对处理器的负载很小，因此通常最好为带宽目的最小化大小。老实说，如果有可能，一个带样式的<hr>比一张图片更好，因为它可以省去额外的 HTTP 请求。 - Nightfirecat

@Nightfirecat 嗯，普通的<hr />与背景之间的对比度不足以提供我所需的效果。因此，创建一个1x3的图像和一个100x3的图像并不会改变速度吗？ - Freesnöw

你可以通过添加样式来改变颜色 - <hr /> 标签的默认样式是一个高度为0，1像素边框的块级元素。只需更改边框样式，就可以得到你需要的效果。 - Nightfirecat

3个回答

1

我的猜测是速度问题可能是由于http请求而不是图像重复使用的次数。如果是较小的图像，则下载量较少，查看速度更快。

话虽如此，如果您想要复制一个<hr/>，请尝试使用带有outset/inset的div和边框；

- Phil

或者只需使用<hr />，它的边框可以被样式化？毕竟，HTML应该是语义化的。 - Nightfirecat

1

我正在寻找备份的参考资料，但我读到10x10或20x20比1x1更可取，因为HTTP响应的块大小会导致大致相同的下载时间，而更大的图像对于浏览器布局更快。

- n8wrl

20x3呢？我相信它遵循同样的概念吧？ - Freesnöw

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- switz · Accepted Answer

我会尽可能地把工具栏缩小。通常情况下，下载所需的时间比呈现需要的时间更长。但在今天的世界中，这并不那么重要。如果您想让它呈现得更快，我建议使用大约100像素的宽度。无论如何，在现代互联网和处理器的速度下，这都不是什么大问题。

如果可以避免使用图像，请使用边框。