Html 如果我使用背景图像，会不会有性能问题

我知道了，如果我们不给出宽度和高度属性。在图像标签中将有一个性能问题。 我有一个div元素，我正在为它设置宽度和高度的百分比。同样，该div具有固定大小的背景图像，例如140px×140px。 在这里，会不会有演出问题

标记示例：

<div style="width:50%;background:url('imgofsize140*140') no-repeat">&nbsp;</div>

---

谢谢

我认为不会像不在img标签上指定高度和宽度那样出现性能问题，因为这会迫使浏览器重新绘制整个页面，而这正是性能问题所在

tl；博士

您不会得到性能惩罚（在另一种情况下，性能惩罚也很小）

更多详情：

你不应该关心（除非你为谷歌工作）不指定宽度和高度会带来的性能“损失”，而应该更多地关注你可能会得到的布局闪烁

不指定宽度和高度将使浏览器显示一个初始框，因为它事先不知道图像将占用多少空间，并且在加载图像后，它将进行回流-这意味着它必须重新计算一些元素的布局，这些元素将受到尺寸更改的影响。但是，这实际上会很快发生（而且你可能会在很多其他地方触发回流）

---

背景图像不需要回流。

我认为这不会影响性能

---

如果您将背景图像合并为一个图像，并在需要时将其定位，这将有助于提高性能，因为您只加载一个图像而不是多个图像。

除非div宽度小于140px，否则背景图像将显示为140x140

---

您可能还希望在旧浏览器（如InternetExplorer 6-7-8）中检查结果，以确保是否存在任何其他性能问题。

取决于浏览器。我今天了解到Chrome当前会在你使用绝对位置bg图像滚动时重新绘制画布。Firefox处理得很好。这应该在未来的Chrome版本中修复

相反，指定img高度和将导致性能问题。

---

因为通过指定它们，可以告诉浏览器首先调整img的大小，然后渲染图像。例如，存储缩略图像比动态调整图像大小要好得多。

这不是一种适合所有情况的大小调整方案-因此我们必须逐案查看

我们必须记住很多变量——用户的互联网连接速度、图像大小、计算机能力等等

我发现了一些与这个问题相关的问题。我将包括他们，因为我认为这是有益的。我不是声称自己是绝对正确的

---

性能参数 好吧，浏览器缓存图像是一样的，不管它们是在DIV中还是在 IMG。无论如何，我认为这是其中一个具体的例子 性能定义为每个系统内部的实现细节 渲染引擎（可能还有围绕它们构建的浏览器）。作为 这样，它既超出了我们作为设计师/开发人员和主题的控制 从一个浏览器更改为另一个浏览器，从一个版本更改为另一个版本。换句话说 总之，我不会花太多时间担心它

上下文 技术差异是的，最重要的是您可以设置宽度/高度 它会拉伸图像，这在 有些情况

不过，你要记住的主要事情是 HTML文档中的图像。如果图像是内容，则称为图像 在画廊里，我会使用IMG标签。如果它只是接口I的一部分 可以使用div代替。 -保罗

对此的反应同样重要。 也就是说，你提出了一个关于语义的很好的观点 区别：当图像是一个图像时，IMG通常是更好的选择 材料是页面内容的一部分，而CSS技术通常是 当图像仅用于装饰或格式化时首选

这与性能没有直接关系-更多关于语义和可访问性。W先生

---

还有一个是关于表现的，所以我觉得这与你的问题直接相关

有背景图片的版本实际上给了我一个“文档” 在.0225秒后完成–当完全加载页面时 与内联图像版本大致相同。你能用全部吗 背景图像可加快启动$.document（就绪）？事实证明 仅在元素（包含）之后下载背景图像 div、span等）可用。这可以防止从四面八方阻塞 获取图像所需的行程

结果：内联图像测试页面

结果：背景图像测试页面

---

如果图像已达到所需的指定大小，则无需在属性中指定高度和宽度。此外，使用背景图像时不会出现性能问题。

说得好。很高兴看到加载结果的比较。非常有帮助！也有这个网站，以帮助测试您的网站的页面加载速度，并进入细节和等级的各种不同的点：D！