如果我必须在我的 HTML 页面上多次显示一张图片，从网站性能的角度来看，这会更好，许多图片标签具有相同的 src URL，还是许多元素具有相同的 CSS 中定义的背景图片？第一种方式，浏览器应该在第一次请求时缓存图片，但是仍然有很多请求需要处理。第二种方式，在我看来只有一个请求，当解析 CSS 时。我认为这样更有效率是对的吗？
问问题
350 次
1 回答
1
即使在 CSS 的情况下，多个背景图像规则仍然需要浏览器发出一个 Web 请求然后缓存图像。完全相同的机制将到位。图像是在 CSS 而不是 HTML 中引用的事实不允许浏览器神奇地“知道”它已经拥有图像而无需检查缓存。
您的两种方案之间的主要区别在于，如果您引用 CSS 中的所有图像，则CSS 本身可能会被缓存，这将代表性能的微小提升，并且您的 HTML 文件会更小。改进可能会也可能不会很大 - 它取决于许多其他因素，例如我们实际谈论的图像引用数量、您的 HTML 文件本身是否可缓存、用户平均进行的页面浏览量等等.
总而言之，CSS background-image 可能会稍微好一点，但不是因为您所说的原因。无论您是在谈论 HTML 还是 CSS，您仍然在查看一个请求，然后是一堆缓存命中。
于 2013-06-21T10:32:22.510 回答