数据URI的减速页面

我构建了一个脚本，它将所有内嵌图像替换为数据URI，以减少http请求并增加移动设备上的加载时间。数据URI的减速页面

不幸的是我经历了更慢的加载速度。我认为这取决于HTML文件更大（大约100kb而不是5 kb左右）:)？还是有其他的数据URI可以减缓页面加载速度？

必须浏览器完整下载完整的文档，然后才能加载它的喜欢的来源？或者，在浏览器完成整个文档之前，将加载链接的源文件，例如文档顶部的css和javascript？

它如何处理CSS？阅读所有CSS设置之前，浏览器是否必须加载完整的CSS文件？

如果是的话，是能够更好地对数据的URI这样的sepearate CSS文件：用于结构

加载CSS（无数据的URI）
背景图像加载CSS（所有背景图像URI格式）

将一个“单独的chapgjpg文件”加载速度比“包含在缓存的css文件中的基于URI的图像”更快吗？

有关如何使用数据URI的其他建议？

来源

2013-12-12 user1087110

mobify.com发表了博客文章：On Mobile, Data URIs are 6x Slower than Source Linking (New Research)

[...]
所以你可以想象我吃惊地发现，测量成千上万的手机网页浏览的性能时，那个负荷使用数据URI的图像平均比使用二进制源链接（例如具有src属性的img标签）的平均速度要慢！

我没有深入这篇文章，但我想这个问题的一部分可能是解码base64编码数据URI所需的CPU功能。

作者建议只使用数据URI“很少用于小图像”。

来源

2013-12-12 14:54:29 unor

谢谢。我也发现这个：http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice。我不会去URI，即使在一个单独的CSS文件，因为它花费CPU ...谢谢 – user1087110

将HTML内容加载以便它们出现在HTML文件中。大尺寸的数据URI会降低页面的速度。大型数据URI在IE浏览器（IE6）中不受支持。

推荐使用通常用于图像尺寸小于20KB的数据URI &。

您可以选择图像压缩，js，css压缩来增加pagespeed。

来源

2013-12-12 14:14:56 user2227606

感谢您的回答！你知道为什么大尺寸的URI会减慢页面的速度吗？我不在乎低于EI9的版本:)为什么200 kb的数据URI会比分离的200kb的jpg文件差？你知道浏览器是否必须先完成html文件的加载才能开始加载链接的源代码？你知道CSS文件是否必须在所有的CSS设置被设置之前完成加载？ – user1087110

数据URI的减速页面

回答

相关问题