英文原文：http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

中文翻译：http://www.csdn.net/article/2013-09-25/2816925-CSS-Sprites-vs.-Data-URIs:-Which-is-Faster-on-Mobile

上文对dataURI 与 CSS Sprites的性能进行了详细的对比与阐述。

根据上文的测试结果，在移动端，需要强调如下结论：

  1. 仅对很小的资源采用dataURI
  2. 不要在CSS和HTML中过多的内联dataURI
  3. 移动端不要使用超过3-5次dataURI（同一个页面）

dataURI V.S. CSS Sprites 移动端的更多相关文章

  1. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  2. 使用CSS sprites减少HTTP请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 CSS sprites是指把网页中很多小图片(很多 ...

  3. CSS sprites减少HTTP请求

    使用CSS sprites减少HTTP请求   sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大 神马是CSS 小妖精 C ...

  4. Web优化 --利用css sprites降低图片请求

    sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉非常easy的东西.作用却非常大 什么是CSS Sprites CSS Sprites是指把网页中 ...

  5. css sprites（精灵图）如何使用？

    CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...

  6. CSS Sprites优缺点

    利用CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因: CSS Sprites能减少图片的字节, ...

  7. 神奇的CSS sprites，制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  8. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  9. Css Sprites 多张图片整合在一张图片上

    CSS Sprites原理: CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","backgro ...

随机推荐

  1. XAML parser exception

    To debug xaml exception: Visual Studio -> Debug -> Exception -> Common Language Runtime Exc ...

  2. ICE——1.Printer

    一:打印机 1.Slice定义: interface Printer { void printString(string s); }; 我们的Slice定义含有一个接口,叫作Printer.目前,我们 ...

  3. query 的list()和iterator()区别

    区别: 1.返回的类型不一样,list返回List,iterate返回iterator. 2.查询策略不同.(获取数据的方式不一样,list会直接查询数据库,iterate会先到数据库中获取id,然后 ...

  4. document.body.clientHeight 和 document.documentElement.clientHeight的区别

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  5. php使用 memcache 来存储 session 方法总结

    设置session用memcache来存储 方法I: 在 php.ini 中全局设置 session.save_handler = memcache session.save_path = " ...

  6. Rearrange a string so that all same characters become d distance away

    Given a string and a positive integer d. Some characters may be repeated in the given string. Rearra ...

  7. php如何遍历多维的stdClass Object 对象，php的转换成数组的函数只能转换外面一丛数组

    php如何遍历多维的stdClass Object 对象,php的转换成数组的函数只能转换外面一丛数组 (2012-09-10 19:58:49) 标签: 杂谈 分类: 网页基础知识 php如何遍历多 ...

  8. objective-c基础教程——学习小结

    objective-c基础教程——学习小结   提纲: 简介 与C语言相比要注意的地方 objective-c高级特性 开发工具介绍(cocoa 工具包的功能,框架,源文件组织:XCode使用介绍) ...

  9. ext3grep 模拟恢复删除文件

    一,下载ext3grep-0.10.1.tar.gz 点此下载 二,安装 #tar zxvf ext3grep-0.10.1.tar.gz #cd ext3grep-0.10.1 #./configu ...

  10. m=m++，结果让你大吃一惊。

    如图,本来以为m=m++和m++是同一个效果,没想到m的值居然还是0. 原来m++是一个表达式,是有返回值的,它的返回值就是m自加前的值,Java对自加是这样处理的:首先把m的值(注意是值,不是引用) ...