资源时Web浏览器保持的网页图像上的网页 与通常的网址的网址或数据URI

Question

一个罐源图像的使用区别：

<img src="some-image-url" > 

，或者

与数据URI：

<img src="data:......." > // data:[<mediatype>][;base64],<data> 

这与在HTML文档中使用脚本或使用脚本的URL与脚本标记链接相似。

第二个让页面使用更多的内存，因为它在img标签的src属性中的document中有很多字符串数据？

Answer 1

图像传输为data:的URI做了两两件事：

1. 它的图像与HTML页一起发送，这样他们就不必单独下载和立即可用的浏览器。它消除了从单独的HTTP请求获取图像所产生的延迟。
2. 它每次都会将图像连同HTML页面一起发送，因此无法单独下载和缓存，并增加了HTML文档的大小和下载时间。

浏览器的“资源”或“内存”使用将因浏览器而异，并且相对较小。在第一次加载图像时使用外部图像URI会比较慢，因为它需要分开提取，但后续所有请求都会更快，因为它可以被缓存。将图像传输为data: URI将同样减慢所有后续请求中的HTML文档。这是重要的区别。