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

Question

我倾向于将简单的颜色放在带有虚线边框的大div（960x1250像素）中。所以，我申请了2个解决方案：

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

我已经对它们进行了测试，但我真的看不出它们的不同。在使用标记background-color与静态图片时，是否有人试验过网络浏览器的性能？

感谢您的预先答复。

Answer 1

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

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

Answer 2

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

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