html - 哪种技术在 css 中显示图像更快？

Question

技巧1

.realimage {background: url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')}

技术2

.realimage {background: url('http://..test.jpg);

问题

1. 如果我需要在同一页面上显示多个相同的图像，我认为技术 2 应该更快，对吧？因为后续检索图像将来自浏览器缓存？

2. 如果我需要在不同的页面上显示多个相同的图像，我认为技术 2 应该更快，对吧？因为后续检索图像将从浏览器缓存中获取？

Answer 1

我反对技术 1 的主要观点是:

• 数据 URI 没有得到广泛支持(当然，我特别关注 IE)
• 在不同的 CSS 文件中使用相同的图像会导致不必要的开销
• CSS 文件变得不必要的大

技术2应该是首选。最初它会导致额外的 HTTP 请求，但每次后续使用相同的 URL 都会被缓存，无论它是在何处使用(HTML、CSS、Javascript)。