Data URI 阻塞所带来的便秘感

接下去会看到很多次这张照片,感谢摄影师 @蜜桃儿

其实挺讨厌为了用新技术而滥用新技术的,请把重点放在技术所带来的提升上

有人会跟你说,CSS书写顺序会影响性能,颜色值简写会影响性能,请问能影响多少性能?
How expensive are HTTP requests?(我x,加点英文瞬间高 class )

Data URI 是什么?

参考鬼哥老师的 Data URI 的利弊
(大猫:不过CPU 内存啥的我倒觉得不是大问题,因为一般不会用很多,鬼哥只是放大了突出问题)

Data URI 的各种DEMO

那下面继续放大问题,我觉得最大的问题是阻塞所带来的便秘感

Data URI 丢在 CSS 里
http://code.sh/lab/data-uri/data-uri-css.html
结论: CSS 丢 head 是为了不 reflow ,但会阻塞页面,长时间白屏, 优点是 CSS 里的 Data URI 是同 CSS 一起缓存并支持 GZip .

Data URI 丢在 HTML 里
http://code.sh/lab/data-uri/data-uri-html.html
结论: 阻塞后续页面, 同时图片全部下载完后瞬间出现, html 一般不缓存,强烈不推荐这种

Jpg 丢在 CSS 里
http://code.sh/lab/data-uri/jpg-css.html
结论: 最常见,相比多了一个请求,但 background-color:#000 马上出现,无任何阻塞, html 结构优先显示,支持 jpg 的多条路径下载(下载多少显示多少), 有进度感知

Jpg 丢在 HTML 里
http://code.sh/lab/data-uri/jpg-html.html
结论: 同上,不过好比样式内联,不方便维护和缓存不如楼上

Data URI 总结

如果页面内就个把小 icon ,是非常适合用 Data URI 的,因为这个时候请求数比阻塞贵一点
但 icon 多或大, CSS Sprite 雪碧图是您不二选择

因为,一个有进度感知的页面即使3.5秒逐渐打开,也比3秒白屏后一次性打开体验来的好,对吧?
对!

11 9 月, 2012

bigCat

Codex

data uri, 用户体验