大猫 (Madao) - まるでダメなおっさん

Data URI 阻塞所带来的便秘感

by bigCat 13 Comments

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

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

有人会跟你说,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秒白屏后一次性打开体验来的好,对吧?
对!

Comments ( 13 )

  1. Reply秋爱
    初级应用来说,完全没必要考虑这些,稍微大一点的,用雪碧图也就可以解决了. 要说用Data URI,还是适合那种图片小到20B什么的,就不值得去占用一个并发的时候吧. 硬要说性能方面的问题的话,主要就是浏览器处理大量的Data URI的时候所损耗的时间了.要用1秒去处理一个Data URI...是要多大的图片啊...
  2. Reply塔防游戏
    没体验过,楼主的便秘感挺强的,哈哈,不通畅难受吧!
  3. Reply我的名字叫麒
    哈哈,那张图片碉堡了~~~
  4. Reply彩虹之家
    这个图片太那个啥了!
  5. Reply大发
    赞同最后一句话。
  6. Reply叫兽叫兽
    这篇文章有点儿喜感。 - -
  7. Reply平板盒子
    我看不懂文章,但是看到了图片。
  8. Reply中频感应加热设备
    只看了题目和文章
  9. ReplySirius
    咦?这图是大喵本尊咩?
  10. Reply一丝冰凉
    这种技术我觉得还是不适合普适。
    • ReplybigCat
      @一丝冰凉 整个页面就一两个不超过1K的icon偶会考虑下,哈哈
  11. DataURI 阻塞 - otarim | otarim
    [...] 原文来源:http://ooxx.me/data-uri.orz This entry was posted in cookie and tagged datauri by otarim. Bookmark the permalink. [...]
  12. ReplyPHP乐知博客
    这个域名的域领可够长的啊。过来看看。

Leave a reply

Your email address will not be published.

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>