99css

YAHOO!的性能专家Stoyan Stefanov先后发布了

• data:urls – what are they and how to use them
• MHTML – when you need data: URIs in IE7 and under
• Data URIs, MHTML and IE7/Win7/Vista blues
• Uncompressed data in base64? Probably not

NCZ也有

• Data URIs explained

引起了我们对data uri的关注，国内的也有一些不错的文章，比如：

• 秦歌的Data URI 和 MHTML
• 云谦的Data URI小试 —— 在旺旺点灯(JS)上的应用
• 鬼哥的Data URI的利弊
• aoao的MHTML在ie7/vista bug 解决方案

工作太过饱和一直未深究，而前不久YDN的Performance on Yahoo! Search for Earth Day再次提到，更是撩起了我内心沉睡的欲望…

data URI的优缺点

data uri的主要优点是减少了http请求数，Best Practices for Speeding Up Your Web Site：

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

还有就是调用起来比css sprite更加灵活，缺点是增加了客户端的资源消耗。

浏览器支持情况

Data URIs explained：

Most modern browsers support data URIs:

• Firefox 2+
• Opera 7.2+ – data URIs must not be longer than 4100 characters
• Chrome (all versions)
• Safari (all versions)
• Internet Explorer 8+ – data URIs must be smaller than 32k

不能太迷信权威，NET.2971 – The RFC 2397 data URL – Part 1这里说的比较靠谱：

2.3 – Maximum size

The size of data URIs is limited in some browsers. IE8 for example has a limit of 32,768 characters [4].

Filename Size[px] Size[kB] Size[chars]
Wallpaper_1600_1200.jpg 1600×1200 309 699052 – 9199 =

A test was done with IE 8 (8.0.6001.18702), Firefox 3.5.3 and Opera 10.0. A large wallpaper, 1600×1200 px, 309 kB was converted to Base64, resulting in almost 690k characters. This inline image was added to a HTML page and opened in the browser.

IE8 only displays the first part of the image (probably 32,768 characters), Firefox and Opera are showing the complete image.

When searching for information about maximum data size, Opera is often mentioned with a limit of 4100 characters, but this is apparently for older versions.

It is often said that inline images should be limited to small images, for example icons. In practice, however, often much larger images are used. Examples are the Google news pages with 80×80 px standard images (about 3000 characters), some pages contain more than 20 of them. We also see that all modern browsers support large data URLs which is a deviation from earlier policies.

MSDN上的data Protocol：

Data URIs cannot be larger than 32,768 characters.

还有段视频Internet Explorer 8 Data URI（不想装淫光的下面有下载链接）

可以简单理解为我们只要把data URI的字符数控制在32768字符内就可以照顾到所有A级浏览器了。

IE6&7使用MHTML并注意MHTML在ie7/vista bug 解决方案就好了，JavaScript组件打包模式里说的比较明确：

MHTML在ie7+/vista缺少结束分割符无法显示，win03sp2缺少Content-Type会有安全提示，原因都MIME不标准，不是所有的东西都可以省。

下面要开始测试了，demo在此，是在WIN7 IE8的IE7模式进行的测试，结合httpwatch和fiddler，虽然不是测试所有浏览器但可以反映出一些共同的问题。

PS：demo是在tommyfan的基础上改的，节省了我不少时间，感谢囯＋先；99css所在的服务器大猫给开了gzip，有兴趣的朋友可以到 http://miao.in去看看:)

下载速度对比

正常网速

可见，base64稍慢

fiddler模拟低速

base64慢了不少

渲染时间对比

几毫秒可以忽略，不过还是base64偏慢，data:URI + mhtml troubles and solutions中有云：

data:URI takes much more time to be processed (in comparison to CSS Sprites or raw images) – about 10x more (for Firefox, for IE – 2x, for Opera/WebKit almost the same time). So in case of large images’ square (starting from 400×400, or 100k square dots), so you must be careful ibefore you completely convert all graphics to base64.

感官体验

并不是下载速度越快越好，还要考虑访问者的主观感受，比如逐步呈现(Progressiv Rencering)，将css放顶部的原因就在于此，测试demo，虽然放底部速度更快，但放顶部可以逐步呈现，详见《High Performance Web Sites: Essential Knowledge for Front-End Engineers》（中译名：《高性能网站建设指南》）第五章的分析。

sprite的demo中页面是逐步呈现的，而base64在css下载完成前一直处于“白屏”状态

Data URIs for CSS Images: More Tests, More Questions走了点弯路，想把data uri的css放底部，可能他没看过《High Performance Web Sites》吧:) (Rob, this is only a joke~)

文件尺寸对比

原始的31个icon加起来16.5KB

sprite的css 1.4KB + 图片4.54KB = 5.94KB

data URI的css 51.2KB, gzip后16.5KB

对于大型站点来说流量 = ￥，这点sprite领先

CPU&内存对比

通过观察Windows任务管理器，base64比sprite多1%左右的CPU，多1M左右的内存

data URI使用建议

• 能使用sprite的地方尽量使用sprite
• 不方便使用sprite的时候才使用data uri，比如
  • 宽高不固定且又又要求background-position:center bottom
  • repeat/repeat-x/repeat-y的图片
  • png-24图片，IE6用α滤镜时图片请求不到会导致浏览器一直处于卡死状态，详见Image Optimization, Part 5: AlphaImageLoader，用mhtml代替则可避免此问题（先下载css，再从缓存调用自身）

以上结果跟demo本身的特点有很大关系，希望能看到各位的更多测试结果

除了文中提到的文章，下面的也不错：

• data URI scheme
• MHTML
• Inline Images with Data URLs
• data URI browser issues
• Why The data: URI Scheme Could Help Save Your Slow Site
• data: URL tests
• CSS + Data URIs = Fewer HTTP Requests
• К вопросу о кроссбраузерных Data URI （俄文，期待俄语达人能翻译一下，可以的话评论也翻译吧）

另外，我写了个生成器，改天详细介绍:)

• 原文：Equal Height Columns with Cross-Browser CSS and No Hacks
• 作者：Matthew James Taylor
• 翻译：ytzong

纯 CSS 打造多列等高并不像想象中那么容易。本文着重讲述多列布局出现的问题，之后提供一个在所有浏览器都正常工作的简单解决方案。这个方法 100% 无 CSS hack，无图片，无 javascript，甚至可以用在最严格编码的网站上。

多列等高的问题

上例中有包含不同内容的 3 列，可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高？或具体的说，如何使所有列的高度等于最高列的高度？这很棘手，因为我们不清楚每列将会多高，哪一列是最高的。不能简单的给所有列一个固定的高度，如果内容很少将会导致页面底部有大片空白；如果内容太多则会在文字显示完全前关闭。两种情形都不妥。实际上，内容的长度是动态的，所以每列的高度也是动态的。必须意识到Web 上没有固定的东东，乡民们有不同的屏幕分辨率，浏览器中的文字也可能被设置为任意大小，所有这些都会影响内容的高度。

分离列内容与其背景色

解决等高问题的第一步是把能分离的破开。方法是每列用两个 div 替代原来的一个。第一个 div 用来放内容，另一个用来作背景色。分离使我们可以单独控制这些额外的元素，之后用更有效的方法把它们放在一起。答案呼之欲出。

浮动的容器的高度始终取决于其浮动的内容（高度）

这是本文多列等高方法的核心。 使一个 div 的高度等于最高列高度的唯一方法是这个 div 包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。

3列 HTML div 结构

上例中 3 个内容列在一个 div 容器中。

<div id="container1">
    <div id="col1">Column 1</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

3 列 CSS

下面是使 div 容器等高于最高列的 CSS。

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

为了让这一结构在所有浏览器中正确工作，容器 div 必须浮动（左或右），同时每一个内容列的 div 也要浮动，哪种方式并不重要。浮动内容 div 的进程使它们在页面中排列在一条水平线上。浮动容器使其自适应到最高列的高度。如果不浮动容器，内容
div 将会从容器底部溢出，容器不会拥有正确的高度。事实上在此例中，容器不浮动的话其最终高度为0。

增加额外嵌套的容器

下一步是增加额外的容器，它们彼此嵌套。我们需要容器的数量等于列的数量：3。这 3 个容器用作各列的背景。请注意，我们去除了原始列的背景色，并将其加至容器上。

3列 HTML div 结构

两个额外的容器加至下面的 HTML 中。

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

3 列 CSS

所有元素左浮动，容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
}
#container1 {
    float:left;
    width:100%;
    background:red;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

用相对定位移动容器

现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%，为了显示中间的黄色列container1 向左移动了40%，与此同时红色部分依然可见作为左侧列。

相对定位的 CSS

下面是添加了相对定位的CSS。

#container3 {
    float:left;
    width:100%;
    background:green;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
}
#col2 {
    float:left;
    width:40%;
}
#col3 {
    float:left;
    width:30%;
}

将每列的内容移回

下一步是把每列的内容移回到页面上，使之排列在下面的背景色上。再次使用简单的相对定位来完成它。

最后在最外面的容器 container3 上添加overflow:hidden，砍去超出容器的部分。

相对定位的 CSS

下面是增加了相对定位和溢出的 CSS 规则。请注意 container3 上额外的position:relative; 这是为了解决一个
IE bug ，阻止overflow:hidden;工作。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}
#col2 {
    float:left;
    width:40%;
    position:relative;
    left:70%;
}
#col3 {
    float:left;
    width:30%;
    position:relative;
    left:70%;
}

对列增加 padding

最后还需对列增加 padding，这样每列边缘的文字不至于显得拥挤。如果我们增加 padding，一些浏览器中可能正常显示，但不是所有。IE 错误的盒模型，导致其估算拥有padding 的元素宽度异常。一个 200px 宽 20px padding 的 box 在 IE 中被视为 200px 宽，在其他浏览器中则为正确的 240px。padding应该加在元素的宽度上。凸微软！

不过不用担心…我们可以用完全不依赖于 padding 的方法来解决这个问题。相反，我们把列弄窄一点（列宽减去两侧的 padding），之后用相对定位把它们移至正确的位置。在我们的例子中我们用了2% 的 padding，则 30% 的列将减至 26%，40% 的列减至 36%。用相对定位移回列时需谨记，现在列变窄了，所以当它们一起像最初那样左浮动时，每一个需要比上一个移动更远的距离。

完整的CSS

为了使布局保持在小宽度我在每个内容列增加了overflow:hidden; 这将切去超出列宽的东东，并阻止其干扰其他布局。重申一下，这只是IE 的问题，其他所有浏览器会保持正确的布局，不管列内是虾米。如果你真想这样做，可以用 IE 条件注释只对 IE 写规则。

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

好了，就是这样。我希望这篇文章对你有用。可以自己弄一下 CSS 看一下它是如何工作的。你可以搞很多列，只要容器和内容列的数目相等。不要忘记看看我的 demo：2列 ，3列，4列，以及5列。