38

我正在构建一个使用滚动插件的网站，该插件基本上可以为滚动设置动画。我非常关心性能，就像我在网站中插入一些图像一样，滚动/动画时看起来很不稳定。

我可以用图像检测到的主要问题是回流/重绘问题，当图像没有正确的尺寸并因此被缩放时（我必须处理这个，我知道最佳实践）。

考虑到这一点（图像将被缩放）。什么应该更好，图像元素或以这些图像作为背景的 div 以提高性能？

我在我的 chrome 浏览器内存工具中制作了这个 jsFiddles，显示背景图像选项使用更少的内存。

<img />：http: //jsfiddle.net/ek6Xn/

<img src="..." />

background-image：http: //jsfiddle.net/ek6Xn/1/

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

参考：

  1. img 标签元素与带有背景图像的 div 之间的性能差异？
  2. 何时使用 IMG 与 CSS 背景图像？
  3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
  4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode
4

4 回答 4

19

就我个人而言，我会忘记这种情况下的性能，而是专注于图像是什么：

1）图片=内容

2）背景图片=设计

我倾向于考虑的方式是，我是否希望图像显示在所有屏幕尺寸、所有设备上、打开或关闭 CSS？我是否希望 Google 和 Facebook 将图像“编入索引”。如果所有或任何这些问题的答案都是肯定的，那么通常图像是“内容”，您应该使用 IMG 标签。

如果您希望以不同的屏幕尺寸显示不同的图像（或在某些设备上根本没有图像），或者您很高兴图像不会出现在打印输出上，或者您很高兴图像不会出现如果 CSS 关闭会出现，那么通常图像是“设计”，您应该使用背景图像。

于 2013-09-12T01:24:37.943 回答
1

如果您使用<img>或<svg>标记它，它将成为 DOM 的一部分，具有所有优点和缺点（这将花费您一些额外的内存和速度）。

我绝对建议使用 CSS 背景，尤其是当同一个元素/图片重复多次时（带有图标的表格等）。

于 2020-12-14T16:10:01.987 回答
1

从性能的角度来看，加载一堆大图像作为 CSS 背景会减慢整个网站的速度，因为 CSS 需要更长的时间来解析。

但是，使用 HTMLimg标签，可以更快地解析 CSS，并且每个单独的图像请求将在解析 HTML 时独立发出。

使用 CSS 方法，您正在等待所有包含图像请求的 CSS 完成解析。使用 HTML 方法，您将开始更快地从自上而下地单独查看内容，而不是等待所有内容立即准备好。

我是这样理解的。如果我错了，请用评论纠正我。

于 2021-11-04T19:53:34.050 回答
-4

希望对大家有所帮助！。

  1. 这最好为您使用标签。

我认为，动画图像是从浏览器 DOM 动画内容（图像）。您应该考虑道路时间（CSS 和 Js 文件）。

然后有很多原因。我的意思是alt属性和大小，性能。

谢谢

于 2020-05-17T19:33:11.470 回答