数据URI的减速页面 [英] Data URI's slow down page

查看:53
本文介绍了数据URI的减速页面的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我构建了一个脚本,该脚本将所有内联图像替换为数据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:

  1. 为结构加载CSS(无数据uri)
  2. 为背景图片(所有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?

推荐答案

mobify.com 发布了博客文章:

[…]
因此,您可以想象到我惊奇地发现,在测量数十万个移动页面视图的性能时,使用数据URI加载图像的速度平均比使用二进制源链接(例如,具有 src 属性的 img 标签!

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

I didn’t dig into this post, but I guess part of the problem might be the required CPU power for decoding base64-encoded data URIs.

作者建议仅不经常为小图像使用"数据URI.

The author recommends to use data URIs only "infrequently for small images".

这篇关于数据URI的减速页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆