OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

最新研究:在手机上,Data-url和CSS Sprites哪一个更快?


分享到


分类 技术前沿   发布 ourjs  1378346008000
注意 转载须保留原文链接,译文链接,作者译者等信息。  
本文是三部系列研究Data URIs的在移动方面性能的最后一篇。你可以看看我以前的帖子:
在手机上,Data URI比比链接图片慢6倍 不要责怪Data-URI因为它是基于Base64的。

大约一个月前,我做了一些研究,以了解为什么我所看到使用Data URI的表现不佳。我的结果发布后,从更广泛的网络性能界更深入的问题是:
“好吧,你怎么看Data-URI技术,仅仅是减少页面上的HTTP请求数吗?”

问题有很大的意义 - CSS中使用Data-URI作为一种替代的当今最典型的图片引用,已经成为I今天在网页设计的习惯,虽然它不是他们唯一的用途:例如,数据URI可以放置其他如JavaScript资源。

为了提供一个对这个问题的回答,我进一步的研究了Data-URI 。在这篇文章中,我将提供更多的场景上,为什么数据URI的性能是一个重要问题,有关实验的一些额外的细节,当然,Data-URI或CSS切片更多的在移动上面性能的比较。

CSS Sprites 回顾

对于那些不熟悉的术语, CSS Sprites是由戴夫·谢伊,在2004年到Web带来的图片管理技术。 CSS切片提供了一个巧妙的办法,在一个页面只使用一个HTTP请求并包括多个图像。

为什么要花费这么多时间的Data-URI性能?这不是一个很小的方面吗?

一点也不!事实证明,使用Data-URI与另一种技术的性能差异可以很容易地造成100ms的差异,
我的研究小组发现,跟我们看到在桌面环境中不同,他在手机的性能性能表现不佳。

进一步分析发现,一个显着的性能差异造成的原因发生在:使用JavaScript实例化Data-URI的实体时,而不是里面的脚本元素的文本节点。

这是非常意外的现象 - 团队中的每个人都知道有没有base64编码应该使用极少量的额外开销。于是我开始调查问题是否具体到JavaScript ,或者如果有更一般的性能问题,围绕使用Data-URI所消耗的网络资源。

Data-URI的性能提升最重要一方面是减少了HTTP的请求。Data-URI经常使用在小图标方面。但据我所知,目前没有在一个页面中使用Data-URI资源的大小或数量的指导上限。

在一个更广泛的背景下看,我们知道,谷歌Chrome团队,苹果Safari团队, Firefox团队, WebKit的开发人员,微软的Internet Explorer都做一个可怕的工作,建设速度更快的浏览器供我们使用 - 作为Web开发人员从来没有这么好过。因此,至关重要的是,开发人员都知道的性能配置不同的技术,使他们能够正确地应用它们。

虽然浏览器提供一个抽象的环境,减少了开发人员的实施细节,但开发仍有很多事情,他们需要了解浏览器的行为, 尤其是我们的目标是设计移动友好的网站,在不到一秒的时间内将内容呈现!

实验方法

要比较Data-URI和CSS Sprites,我感兴趣的是他们在有无缓存方面的差异。

这个实验,我的目标是尽可能接近真实的场景。为此,我选择了一个实际CSS 切片,在互联网上最大的电子商务商店:亚马逊使用。这个CSS Sprites是约25KB的大小,并包含39个不同的图像。

我创建了两个HTML放入iframe中加载。第一iframe包含CSS来指定Sprites每个单独的子画面作为背景图像的位置和偏移量。第二iframe包含内嵌base64编码的URI相同的图像数据。我已经提供了链接到HTML中使用的框架,放在这篇文章的底部,在资源部分在测试中使用的Sprites。使用gzip压缩。

我们会测量开始于iframe被实例化( SRC =属性分配时)和结束的iframe加载事件被触发时的间隔。定时的精度到毫秒的日期对象,这已经足够测试性能。

这个实验测试Data-URI和Sprites的未缓存时的情况,一种四个Test Case。每个Test Case在一个独立的iframe 。数据URI和CSS雪碧条件被随机分配,但缓存的测试条件始终未缓存的情况发生后,立即利用已经完成的工作。这样做是使用一个单独的iframe的父窗口之间的缓存和未缓存的条件保持不变。下面的缓存控制头使用的上的iframe HTML内容的所有条件和CSS精灵的所有资源,包括:

我们一共收集分析了2.8亿个样本。

结果与结论

Data-URI与CSS Sprites测试结果

有趣的是,要在数据未缓存的条件下几乎所有的所有浏览器的中CSS Sprites都比Data-URI快几百毫秒左右 。这是CSS Sprites的事实,尽管它需要一个额外的连接,包括TCP重启动招致所有相关的连接开销!

从结果我们可以看到,在Android 4.2和iOS 6缓存条件下,CSS Sprites在Android 4.2原生浏览器中提升了大约2倍的性能为,在iOS中差70ms~220ms内。 Android上的Chrome浏览器和火狐好一点,约50 〜 60毫秒的性能差异。

铭记,这是只有25KB的Sprites,你可以看到显着的性能差异,两者之间的条件。一般情况下,性能将是线性变化的,如果移动数据URI的大型图像或脚本,对性能的影响是显着的。

基于这项研究,我建议限制使用小Data-URI,15 - 20KB的数据,不超过3 - 5个实例,在移动端这似乎是一个很好的经验法则!
原文地址: 点此
评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Node.js 编程的未来
  2. 站着编程两年后我身体上的变化
  3. 一句命令快速合并 JS、CSS
  4. 最新研究:在手机上,Data-url和CSS Sprites哪一个更快?
  5. Github上最热门的语言
  6. 为什么微软帝国需要解散
  7. NodeJS即将超越Ruby, 正在悄悄改变开源面貌
  8. PaaS乱局:Container的新机遇
  9. 周鸿祎:我做天使投资几个心得
  10. 如何更好用业余时间做互联网创业?
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - 技术前沿
  1. Node.js 编程的未来
  2. 一句命令快速合并 JS、CSS
  3. PaaS乱局:Container的新机遇
  4. 移动网站性能优化:网页加载技术概览
  5. Tessel:用JavaScript做嵌入式开发
  6. 在ES5中实现MapReduce
  7. 为什么JavaScript有能力成为未来企业级编程语言?
  8. 图解C++、CoffeeScript、Ruby复杂度
  9. 创建高安全性PHP网站的几个实用要点
  10. Web App框架发展趋势及现状分析

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号