英文原文: Data URIs are slow on mobile

　　作为一名 Web 开发人员，提高性能的一个重要指标是减少 HTTP 请求，尤其是在智能手机上，一个 HTTP 请求会带来很大的延迟。原因可以参考：移动网络与PC网络的区别。

　　在 HTML 或 CSS 中，可以使用 data URIs 的形式去替换图片地址，所以一直以来使用 data URIs 的形式一直被认为是一个减少 HTTP 请求的有效方案。

　　但是，通过对大概 10w 的移动端的网页进行性能分析，得出了使用 data URI 的形式比使用 binary source link 形式的页面要平均慢了 6 倍！

注意，binary source link 所关联的图片是被缓存的图片，测试的时候没有计算这个图片的 HTTP 请求及下载的时间，但这个图片的请求及下载的时间是比较大的，可以参考这篇文章。从文章中我们可以知道，即使是用了 CDN，在移动端 TTFB（Time To First Byte）可以高达 400ms。

Data URIs 影响性能的主要原因

1. Base64编码后的文件数据是原始文件的 1.37 倍，同时还要增加 814 bytes 的头部信息，而服务器的 gzip 压缩只能压缩大概 3% 的数据。【增大了数据量】
2. 浏览器需要对编码后的数据解码成原始的 binary 形式，而这些操作需要占用 CPU，同时消耗电量。【占用CPU，耗电】
3. 如果 HTML 或者没有被浏览器缓存的 CSS 文件中包含 data URIs，那么当浏览器向服务器请求这些数据时，每次请求服务器都需要发送 data URIs 的内容到浏览器中。【无法缓存】
4. 不管有没有缓存，只要遇到 data URIs 的内容，浏览器就要对它进行解码。【再次占用CPU，耗电】

不使用 Data URIs 增加了传输延迟怎么办？

1. 在请求 header 添加 Cache
2. Optimizing HTTP: Keep-alive and Pipelining & Establishing multiple server connections
3. 使用 CSS sprite

参考资料

1. Wiki: Data URI scheme
2. RFC: data URL
3. Nicholas C.Zakas: Data URIs explained
4. RFC: base64 编码

[理解性翻译] 移动端 Data URIs 比 Source Linking 慢了 6 倍,布布扣,bubuko.com

[理解性翻译] 移动端 Data URIs 比 Source Linking 慢了 6 倍