html - 在什么时候请求图像文件比内联 base64 编码更快？

Question

我正在尝试提出指导方针或性能测试，以帮助我选择哪些图像以内联方式呈现为 base64 编码字符串，哪些应该作为来自 cdn 或类似文件的文件请求。

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

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

Answer 1

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

所以问问自己，是尽快显示图像更重要，还是让页面在没有图像的情况下更快地准备好使用更重要？同样针对 CSS 内联的权衡讨论。