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

Question

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

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

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

标签： htmlimagebrowserbase64

Answer 1

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

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