在什么时候请求图像文件比对内联对其进行base64编码更快？

Question

我正试图提出一些准则或性能测试，以帮助我选择将哪些图像作为base64编码的字符串内联呈现，而哪些图像应作为CDN或类似文件的文件进行请求。

确定请求时间和延迟渲染在衡量请求图像的性能方面相当简单，但是我无法使用Chrome控制台很好地读取内联图像的渲染时间。显然内联较小的图像，并请求较大的图像作为文件，但是什么是一个很好的截止点？

例如，如果一张图像的大小为2kb，并且将其请求为文件需要100毫秒，那么我怎么知道渲染同一张图像的嵌入式版本需要多长时间？

Answer 1

呈现内联base64编码的字符串将始终更快。网络请求将始终比解码base64字符串所花费的CPU处理时间更长。您应该问自己的问题是何时下载字节时要权衡：在HTML的有效负载中，或在以后的单独HTTP请求的有效负载中。添加到HTML中的次数越多，页面加载时间就越长。下载图像而不是内联图像的好处是，如果您不需要立即显示它，可以通过异步获取来推迟它。

因此，问问自己，尽快显示图像是否更重要，或者页面可以在没有图像的情况下尽快使用更重要？同样的折衷讨论也涉及内联CSS。