我开始知道,如果我们不给出宽度和高度属性。在图像标签中会有性能问题。我有一个 div 元素,我正在为其设置宽度和高度的百分比。同样的 div 也有一个固定大小的背景图像,比如 140px * 140px。在这里,会不会有性能问题?
标记示例:
<div style="width:50%;background:url('imgofsize140*140') no-repeat"> </div>
谢谢
这不是一刀切的案例- 因此我们必须逐案查看。
我们必须记住很多变量——用户的互联网连接速度、图像大小、计算机功能等。
我在 SO 上发现了一些与这个问题有些相关的问题。我将它们包括在内,因为我认为它是有益的。我并不是说绝对正确。
AFAIK,无论是在 DIV 还是 IMG 中,浏览器都会缓存相同的图像。无论如何,我认为这是将特定性能定义为每个渲染引擎(可能还有围绕它们构建的浏览器)内部的实现细节的情况之一。因此,它既不受我们作为设计师/开发人员的控制,又会随着浏览器和版本的变化而变化。换句话说,我不会花太多时间担心它。
技术差异是的,最值得注意的是,您可以设置 IMG 标签的宽度/高度,它会拉伸图像,这在某些情况下很有用。
不过,您必须牢记的主要内容是 HTML 文档中图像的上下文。如果图像是内容,比如图库中的图像,我会使用 IMG 标签。如果它只是界面的一部分,我可能会使用 div 代替。- 保罗
也就是说,您提出了关于语义差异的一个很好的观点:当图像是页面内容的重要部分时,IMG 通常是更好的选择,而当图像只是装饰或格式化时,通常首选 CSS 技术。
这与性能没有直接关系——更多关于语义和可访问性。作者——W先生
然后,我认为与您的问题直接相关的 SO 性能关闭。
带有背景图像的版本实际上在 0.0225 秒后给了我一个“文档完成”——而完全加载的页面加载时间与内联图像版本大致相同。可以使用所有背景图像加速 $.document(ready) 的触发吗?事实证明,只有在元素(包含 div、span 等)可用后才下载背景图像。这可以防止阻止获取图像所需的所有往返行程。
我认为不会出现与未在 img 标签上指定高度和宽度相同的性能问题,因为这会迫使浏览器重新绘制整个页面,而这正是性能问题所在。
http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
tl;博士
您不会受到性能损失(在另一种情况下也非常小)。
更多细节:
你不应该关心(除非你为谷歌工作)你会因为不指定宽度和高度而得到性能“惩罚”,但更多的是关于你可能会得到的布局闪烁。
不指定宽度和高度将使浏览器显示一个初始框,因为它事先不知道图像将占用多少空间,并且在图像加载后它将进行重排 - 这意味着它必须重新计算一些元素的布局会受到尺寸变化的影响。但是,这实际上会很快发生(并且您可能会在许多其他地方触发回流)。
背景图像不需要回流。
我认为这不会影响性能。
如果您将背景图像组合成一张图像并在需要时将其定位,这将有助于提高性能,因为您只加载一张图像而不是多张图像。
除非 div 宽度小于 140px,否则背景图像将显示为 140x140。
您可能还想在 InternetExplorer 6-7-8 等旧版浏览器中检查结果,以确保是否存在任何其他性能问题。
取决于浏览器。我今天了解到,Chrome 当前会在您使用绝对位置 bg 图像滚动时重绘画布。Firefox 处理得很好。这应该在未来的 Chrome 版本中修复。
相反,指定 img 的高度和会导致性能问题。因为通过指定它们,您告诉浏览器先调整 img 的大小,然后再渲染图像。例如,存储缩略图比动态调整图像大小要好得多。
如果您的图像已经是您想要的指定尺寸,则无需在属性中指定高度和宽度。此外,使用背景图像不会有性能问题。