html - 处理性能：背景色与静态图片

Question

我倾向于将纯色放在带有虚线边框的大 div（960x1250 像素）中。因此，我应用了 2 个解决方案：

1. 使用background-color和border:CSS 标签
2. 使用静态 PNG-8 图像

我已经测试了他们两个，但我真的看不出有什么不同。background-color有人在使用标签与静态图片时试验网络浏览器的性能吗？

感谢您的提前答复。

Answer 1

唯一可能的区别在于浏览器获取图像所需的时间。与此相比，渲染时间可以忽略不计。

测试时，请确保图像是远程获取的，而不是从浏览器缓存中获取的。当远程获取时，我预测图像选项会慢得多。

Answer 2

您应该更喜欢第一个解决方案。

与数千字节的图像数据相比，几个字节的 CSS（即使图像很小且重复）对于客户端的加载和缓存来说毫无意义。在慢速（移动）系统上，使用 CSS 会更好，因为它的渲染速度比图像还要快。使用 CSS 代替静态图像对于可访问性甚至很重要，但主要的努力是，这对于加载和处理来说都更快。