哪种技术显示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请求，但是无论在哪里使用(HTML、CSS、Javascript)，对相同URL的每次使用都将被缓存。