html – 数据URI的慢速页面

概述我构建了一个脚本,用数据URI替换所有内联图像,以减少http请求并减少移动设备上的加载时间. 不幸的是我的装载速度较慢我认为这取决于html文件更大(大约100kb而不是大约5kb):)？或者还有其他一些数据URI可以减慢页面加载速度吗？ 浏览器必须先完整下载完整文档才能加载喜欢的资源吗？或者在浏览器完成整个文档之前加载链接源,例如文档顶部的css和javascript？ 它如何与CSS一起使用 我构建了一个脚本,用数据URI替换所有内联图像,以减少http请求并减少移动设备上的加载时间.

不幸的是我的装载速度较慢我认为这取决于HTML文件更大(大约100kb而不是大约5kb):)？或者还有其他一些数据URI可以减慢页面加载速度吗？

浏览器必须先完整下载完整文档才能加载喜欢的资源吗？或者在浏览器完成整个文档之前加载链接源,例如文档顶部的CSS和javascript？

它如何与CSS一起使用？浏览器必须在读取所有CSS设置之前加载完整的CSS文件吗？

如果是这样,为这样的数据uri创建一个单独的CSS文件会更好吗：

>为结构加载CSS(无数据uri)
>加载背景图像的CSS(URI格式的所有背景图像)

“单独的chaced jpg文件”加载速度是否比“缓存的CSS文件中包含的基于URI的图像”更快？

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

解决方法 mobify.com发表了一篇博文： On Mobile,Data URIs are 6x Slower than Source Linking (New Research)

[…]
So you can imagine my surprise to discover,when measuring the performance of hundreds of thousands of mobile page vIEws,that loading images using a data URI is on average 6x slower than using a binary source link such as an img tag with an src attribute!

我没有深入研究这篇文章,但我想部分问题可能是解码base64编码数据URI所需的cpu能力.

作者建议仅将“数据URI”用于“不经常用于小图像”.

总结

以上是内存溢出为你收集整理的html – 数据URI的慢速页面全部内容，希望文章能够帮你解决html – 数据URI的慢速页面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。