Data URI小试 —— 在旺旺点灯(JS)上的应用
作者:云谦 发布时间:2009-10-30 18:28:00
本文重在实践和测试,如果你还不了解Data URI,推荐先阅读秦歌的Data URI 和 MHTML。
旺旺点灯(JS)实践经过:
因为要对SRP(Search Result Page)页面进行优化,我们想尽方法节约每一个连接,然后想到了Data URI,ok,先在旺旺点灯里尝试下。
我们都知道,要在实际应用中用上Data URI,必须针对IE6[1]/7使用MHTML。
第一次尝试的代码如下:DEMO
background:url({data uri});*background:url({mhtml}); // IE6/7
似乎没有问题,但如果你用的是IE8,请在IE8兼容模式里看下,你会发现旺旺图片并没有显示出来。
随后测试了多位同事的IE8,找到了原因:
IE8兼容模式下支持IE7的css hack(如 *),但并不支持mhtml,而我上面的写法使得支持 * hack的浏览器都使用了mhtml。
并且,非常郁闷的是,光IE8就有以下情况:
1. 8.0.6001.18702IC,应该是一个早期的版本,支持data-uri和mhtml,没得说。[2]
2. 8.0.7600.16385,有的默认打开是IE8 Mode,有的默认打开是IE8 Compat Mode,就是这个IE8 Compat Mode使得上面的写法产生了bug。
好了,因为是在JS中使用,解决方案也很简单,就是用JS判断下兼容模式,让IE8 Compat Mode也使用data-uri。
最后代码如下:
var compat_mode = /trident\/\d/i.test(navigator.userAgent), css_text = 'background:url({data uri});' + compat_mode ? '' : '*background:url({mhtml});';
淘宝线上试点应用:SRP
最小文件尝试:将旺旺的css sprite进行各种拆分
图片大小为11.773K
我将图片进行了3种拆分(拆分工具:Firework),上下、左右、上下左右,试着寻找最小文件的组合规律,可惜暂时没有收获。
原始大小 | 压缩后大小 | gzip后大小 | |
---|---|---|---|
一个大图 | 30.9K | 30.8K | 12.139K |
左右(两张图片) | 35.5K | 35.5K | 8.094K |
上下(三张图片) | 30.2K | 30.1K | 9.960K |
上下左右(6个小图标) | 38.4K | 38.3K | 10.811K |
可以看到,如果按最优的方法(左右组合)来使用data-uri替换sprite,可节约3.7K和一个连接数。
CSS应用展望:
要在CSS里进行应用,可能还得先解决以下问题:
1. 上面描述的IE8 Compat Mode,CSS中没有对应的hack方法
2. 经测试,发现IE下同一个css文件加不同的时间戳,会被下载两次。
而淘宝的页面时通过时间戳来控制文件缓存的,这意味着每次更改CSS文件都要保持”页面里的CSS路径”和”MHTML中引用”的完全一致。3. YUI Compressor的CSS压缩问题
打开http://a.tbcdn.cn/sys/wangwang/tbww_v1.1_srp.js,我们会发现MHTML是写在注释里的,所以文件上线时需要保留这部分注释信息。
通过YUI Compressor压缩JS的时候可以用 /*! ….. */ 这样的方法保留注释,而在压缩CSS的时候此方法无效。
对应的解决方案如下:
1. 通过JS给html元素增加class=’compat-mode’,然后CSS代码如下
.compat-mode .data-uri-cls, .data-uri-cls { background:url({data-uri});}.data-uri-cls { *background:url(mhtml);}
2. 发现秦歌文章中的有一个CSS Expression的解决方案 [3]
3. 等待YUI Compressor调整或利用ant先提取注释压缩完再加回去
参考文章
秦歌, http://dancewithnet.com/2009/08/15/data-uri-mhtml/
克军, http://hikejun.com/demo/css/data-uri.html
Wikipedia, http://en.wikipedia.org/wiki/Data_URI_scheme
Msdn, http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx
Stoyan, http://www.phpied.com/data-urls-what-are-they-and-how-to-use/, http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/
R Reid, Detecting IE 8 Compatibility Modes with Javascript
[1] IE6有个可以忽视的bug:打开mhtml格式的图片,再选中地址栏,按回车,浏览器崩溃。
[2] xp下载过来的IE8好像都是这个版本。
[3] 请注意,使用YUI Compressor压缩CSS Expression时可能会出错,Expression越复杂,出错几率越大。
猜你喜欢
- 文件操作示例#输入文件f = open(r'D:\Python27\pro\123.bak') #输出文件fw = open
- property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(property:属性,attribute:特性),但
- 页面上有些重要内容需要提醒客户,可采用的方法有很多。提醒用户关注某一区域(div),可以给该div加上边框闪烁的效果,达到吸引用户眼球的效果
- 这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以
- Python list append方法给列表追加元素描述append函数可以在列表的末尾添加新的对象。函数无返回值,但是会修改列表。语法l
- Python作为一种脚本语言,其要求强制缩进,使其易读、美观,它的数据类型可以实现自动转换,而不需要像C、Java那样给变量定义数据类型,使
- 一、前言嗨,大家好,我是新发。有同学私信我让我写一篇Unity网格相关的教程,那我就带大家来一次Unity的网格探险之旅吧~二、Hello
- 最多16列。 create table test ( f1 int, f2 int, f3 int, f4 int, f5 int, f6
- 举例吧,这样更容易看的懂。例1:from django.core.exceptions import ObjectDoesNotExistt
- 无法远程登入MySQL数据库的几种解决办法方法一:尝试用MySQL Adminstrator GUI Tool登入MySQL Server,
- MySQL MEM_ROOT详解这篇文章会详细解说MySQL中使用非常广泛的MEM_ROOT的结构体,同时省去debug部分的信息,仅分析正
- 今天使用os.path.isdir()判断是否是文件夹的时候发现一个问题:lst = os.listdir(path) &nb
- 前言由于后端使用php、node.js、java等进行大量的图片下载操作可能会导致服务器负载过高,所以将图片下载转移到客户端是个不错的选择,
- 向量化与for循环耗时对比深度学习中,可采用向量化替代for循环,优化耗时问题对比例程如下,参考Andrew NG的课程笔记import t
- 使用命令行时,如果要添加选项的话,python 2.3里新增加了一个模块叫optparse,也是专门来处理命令行选项的。from optpa
- 1.生成日志并通过http传输出去(通过HTTPHandler方式):#生成并发送日志import loggingfrom logging.
- 这个语法是用来代替传统的try...finally语法的。 with EXPRESSION [ as VARIABLE] WITH-BLOC
- 本文主要通过实例介绍了scrapy框架的使用,分享了两个例子,爬豆瓣文本例程 douban 和图片例程 douban_imgs ,具体如下。
- 按时间删除文件# importing the required modulesimport osimport shutilimport ti
- 最近在研究雨哲软件采集程序的时候,需要获取真实软件地址时遇到了需要读取跳转页面跳转后的真实地址的问题。在网上找了很多方法,使用WinHttp