data-url: Inline Data inside URL

风行水上 @ 2014-06-01 11:24:00
标签:

    通常,一个链接(URL)指向一个资源(经常是远程资源)。用户通过访问URL得到相应资源的数据。这是一个分为两步的事情:

    1. 得到链接(URL)
    2. 访问资源

    这里可能的问题是:

    • 访问远程资源是有代价的,会影响性能(访问速度)
    • 资源放在别处总不如放在身边方便和安心 (比如保存一个网页还需要另外保存和处理外部资源)
    • 给资源起名字有时也是很烦人的 (有时没名字则是缺点)

    于是人们通过使用data-url把资源内容直接内嵌在URL里,从而节省了一次对远程资源访问的开销。

    一个基于HTTP的资源有几个重要属性:类型,编码,内容。

    data-url显然需要能够描述这几个属性。其基本形式如下:

    data:[<type>][;charset=<charset>][;base64],<data>
    

    属性之间用分号';'分割,与数据之间用逗号','分隔。

    几个例子:

    data:text/html,<html>Hello</html>
    
    data:image/png;base64,<base64 encoded data>
    

    Data-URL 的使用

    • 在HTML/CSS中嵌入小图片和字体文件
    • 在书签中直接保存一个页面
    标签:

      分享到:
      comments powered by Disqus

      28/29ms