在什么情况下请求图像文件比内联进行 base64 编码更快？

Question

我正在尝试提出指南或性能测试，以帮助我选择将哪些图像内联渲染为 base64 编码字符串，以及哪些图像应该从 CDN 或类似的文件中请求。

在衡量所请求图像的性能时，确定请求时间和延迟渲染相当简单，但我无法通过 Chrome 控制台很好地了解内联图像的渲染时间。显然，内联较小的图像并请求较大的图像作为文件，但是什么是好的截止点呢？

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

Answer 1

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

因此，问问自己，是否尽快显示图像更重要，还是在没有图像的情况下页面更快准备好使用更重要？CSS 中内联的权衡讨论也相同。