Data URI 阻塞所带来的便秘感

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

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

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

Data URI 是什么?

参考秦歌老师的 Data URI 和 MHTML 

参考鬼哥老师的 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秒白屏后一次性打开体验来的好,对吧?
对!


已发布

分类

来自

标签:

评论

《“Data URI 阻塞所带来的便秘感”》 有 13 条评论

  1. 秋爱 的头像

    初级应用来说,完全没必要考虑这些,稍微大一点的,用雪碧图也就可以解决了.
    要说用Data URI,还是适合那种图片小到20B什么的,就不值得去占用一个并发的时候吧.
    硬要说性能方面的问题的话,主要就是浏览器处理大量的Data URI的时候所损耗的时间了.要用1秒去处理一个Data URI…是要多大的图片啊…

  2. 塔防游戏 的头像

    没体验过,楼主的便秘感挺强的,哈哈,不通畅难受吧!

  3. 我的名字叫麒 的头像

    哈哈,那张图片碉堡了~~~

  4. 彩虹之家 的头像

    这个图片太那个啥了!

  5. 大发 的头像

    赞同最后一句话。

  6. 叫兽叫兽 的头像

    这篇文章有点儿喜感。 – –

  7. 平板盒子 的头像

    我看不懂文章,但是看到了图片。

  8. 中频感应加热设备 的头像

    只看了题目和文章

  9. Sirius 的头像

    咦?这图是大喵本尊咩?

  10. 一丝冰凉 的头像

    这种技术我觉得还是不适合普适。

    1. bigCat 的头像

      @一丝冰凉 整个页面就一两个不超过1K的icon偶会考虑下,哈哈

  11. […] 原文来源:http://bigc.at/data-uri.orz This entry was posted in cookie and tagged datauri by otarim. Bookmark the permalink. […]

  12. PHP乐知博客 的头像

    这个域名的域领可够长的啊。过来看看。

回复 平板盒子 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注