数据URI的减速页面 [英] Data URI's slow down page
问题描述
我构建了一个脚本,该脚本将所有内联图像替换为数据URI,以减少http请求并增加移动设备上的加载时间.
I built a script that replaced all inline images with data URI's to reduce http requests and seed up loading time on mobile devices.
很遗憾,我的加载速度较慢.我认为这取决于html文件是否更大(大约100kb,而不是大约5kb):)?还是还有其他一些数据URI会减慢页面加载速度?
Unfortunately I experienced slower loading. I figure it depends on that the html file was bigger (around 100kb instead of around 5 kb) :)? Or is there something else with data URIs that slows down the page load?
浏览器必须先完整下载完整文档,然后才能在其中加载喜欢的源代码吗?还是在浏览器完成整个文档之前加载链接的源代码,例如文档顶部的css和javascript?
Must the browser complete download of the full document before it can load liked sources in it? Or will linked sources, for example css and javascript in the top of document, be loaded before browser has completet the full document?
它如何与CSS一起使用?浏览器必须在读取所有CSS设置之前加载完整的CSS文件吗?
How does it work with CSS? Must the browser load the complete CSS file before reading all the CSS settings?
如果是这样,最好为数据uri创建一个单独的CSS文件,如下所示:
If so, is it better to have a sepearate CSS file for data uri like this:
- 为结构加载CSS(无数据uri)
- 为背景图片(所有URI格式的背景图片)加载CSS
独立的jpg加载文件"的加载速度是否比缓存的CSS文件中包含的基于URI的图像"加载的速度更快?
Will a "separate chaced jpg file" load faster than a "URI based image included in a cached css file"?
关于如何使用数据URI的其他建议?
Any other suggestions on how to use data URIs?