url data 方式(url scheme data) _Web前端

url data 模式(url scheme data)

首先来看一段代码

 <IMG
   SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw
   AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
   ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
   a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
   ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
   F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH
   hhx4dbgYKAAA7"
   ALT="Larry">

?有兴趣的朋友可以写个HTML，然后把这段代码拷进去。

用浏览器打开这个html，你会发现有一个人头，然而用HTTP WATCH看一下，你会发现并没有任何HTTP请求。

这是为什么？

仔细看下这个img标签中src属性的内容，会发现这个url的模式是data。这样我们就发现了一个不常用的模式，那么这个模式到底有什么用呢？（原文请看）

他的作用是将一些小的内容用文本的格式放到页面上，从而减少http请求。至于这个小的定义是什么？

先看原文如下：

?写道

The "data:" URL scheme is only useful for short values. Note that
some applications that use URLs may impose a length limit; for
example, URLs embedded within <A> anchors in HTML have a length limit
determined by the SGML declaration for HTML [RFC1866].

?从这段定义可以看出这个文本的内容不能超过url的最大长度限制。

这个data模式的定义如下：

       dataurl    := "data:" [ mediatype ] [ ";base64" ] "," data
       mediatype  := [ type "/" subtype ] *( ";" parameter )
       data       := *urlchar
       parameter  := attribute "=" value

另附 base64的解释

但是我做了一个实验：

<script type="text/javscript" src="data:application/x-javascript;base64,YWxlcnQoJ2hlbGxvJyk7" ></script>

?其中?YWxlcnQoJ2hlbGxvJyk7 是?alert('hello'); 的base64 编码。

但是浏览器能成功解析他的内容，但是不执行这段代码。