利用Data URL(data:image/jpg;base64,)加速网页加载的方法

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">data:image/jpg;base64,/9j/4AAQSkZ……” 就是一张图片的Data URL，就是利用base64编码把图片数据翻译成标准ASCII字符。</span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">
</span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><</code><code class="html keyword" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; color: rgb(0, 102, 153) !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-weight: bold !important; min-height: inherit !important; background: none !important;">img</code><span style="color: rgb(51, 51, 51); font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12.5px; line-height: 13.75px; white-space: pre;"> </span><code class="html color1" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; color: grey !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">src</code><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">=</code><code class="html string" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; color: blue !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">"http://tieba.baidu.com/tb/static-common/img/dimensionCode/tb_common_2dbc.jpg"</code><span style="color: rgb(51, 51, 51); font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; font-size: 12.5px; line-height: 13.75px; white-space: pre;"> </span><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">/></code>
</span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;">
</code></span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">Data URL是在本地直接绘制图片，不是从服务器加载，所以节省了HTTP连接，起到加速网页的作用</span>
</code></span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">
</span></code></span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><span style="padding: 0px; margin: 0px; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">语法：</span><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"></span></span></code></span><p style="padding-top: 0px; padding-bottom: 0px; margin-top: 8px; margin-bottom: 8px; line-height: 22.5px; letter-spacing: 0.5px; font-size: 12.5px; word-wrap: break-word; word-break: break-all; color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体;">data:image/jpg;    声明数据协议及类型名称<br style="padding: 0px; margin: 0px;" />base64,               编码形式为base64<br style="padding: 0px; margin: 0px;" />/9j/4AAQSkZ……    base64编码结果</p>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">
</span></code></span>

<span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><code class="html plain" style="line-height: 13.75px; font-size: 12.5px; white-space: pre; padding: 0px !important; margin: 0px !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important; background: none !important;"><span style="color: rgb(51, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;"><span style="color: rgb(229, 51, 51); font-family: 'Microsoft YaHei', Verdana, sans-serif, 宋体; font-size: 12.5px; line-height: 22.5px;">本方法适合于小图片，大图片就不要考虑了，另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担，总之有利有弊。</span>
</span></code></span>