006-网页嵌入数据Data URI scheme
在项目css中或者图片展示中:
url(data:image/png;base64,iVBORw0KGgoAAA
在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入
优点:
减少HTTP请求数,没有了TCP连接消耗和同一域名下浏览器的并发数限制。
对于小文件会降低带宽。虽然编码后数据量会增加,但是却减少了http头,当http头的数据量大于文件编码的增量,那么就会降低带宽。
对于HTTPS站点,HTTPS和HTTP混用会有安全提示,而HTTPS相对于HTTP来讲开销要大更多,所以Data URI在这方面的优势更明显。
可以把整个多媒体页面保存为一个文件。
缺点:
无法被重复利用,同一个文档应用多次同一个内容,则需要重复多次,数据量大量增加,增加了下载时间。
无法被独自缓存,所以其包含文档重新加载时,它也要重新加载。
客户端需要重新解码和显示,增加了点消耗。
不支持数据压缩,base64编码会增加1/3大小,而urlencode后数据量会增加更多。
不利于安全软件的过滤,同时也存在一定的安全隐患。
Data URI和MHTML两者的配合可以完整的解决所有的主流浏览器,它们由于无法被缓存和重复利用的缺陷,所以并不适合直接在页面中使用,但在CSS和JavaScript文件中对图片适当地使用有非常大的优越性:大大减少请求数,现在大型网站的CSS引用了大量的图片资源。CSS和JavaScript都可以被缓存,间接的实现了数据的缓存。利用CSS可以解决Data URI的重复利用问题。
告别CSS Sprites,CSS Sprites的出现是为了减少请求数,但它除了带来在不确定情况下的异常外,CSSSprites还需要人为的图片合并,即使有合并工具也依旧必须人为地在如何有效的拼图上耗费大量的时间,并带来维护的困难。当你遵循一定的设计原则后, 你就可以完全抛弃CSS Sprites来编写CSS,最后使用工具在上传到服务器环节把图片转换成Data URI和MHTML,如《利用data-uri合并样式表和图片》中用python实现的工具,这可以节约大量的时间。
base64编码把图片文件增加了1/3,Data URI和MHTML同时使用相当于增加了2/3,但CSS和JavaScript可以使用gzip压缩,其可以节省2/3的数据量,所以使用gzip压缩后的最终数据量是(1 + 1/3) * 2 * (1/3) = 8/9,所以最终流量是减少的。
它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具。
1、网页显示的标准语法
<img src=”data:image/gif;base64,R0l……Ds=” />
其实“data:image/gif;base64,R0lGODlhJ……” 就是一张图片的DataURL,就是利用base64编码把图片数据翻译成标准ASCII字符。
等同于:
<img src=”../images/loading.gif”>
换句话说我们把图像文件的内容内置在 HTML 文件中,节省了一个 HTTP 请求。
2、在 CSS 中使用:
body { background-image: url(“data:image/png;base64,iVBORw0K
3、如何查看对应的图片:
把 data:image/png;base64包括之后的字符串复制到浏览器地址栏中打开就可以显示对应的图片了。
4、Data URI scheme语法:
data:image/jpg; 声明数据协议及类型名称
base64, 编码形式为base64
/9j/4AAQSkZ…… base64编码结果
5、Data URI scheme支持的类型有:
data:,<文本数据>
data:text/plain,<文本数据>
data:text/html,<HTML代码>
data:text/html;base64,<base64编码的HTML代码>
data:text/plain;charset=UTF-8;base64,<base64编码的HTML代码>
data:text/css,<CSS代码>
data:text/css;base64,<base64编码的CSS代码>
data:text/javascript,<Javascript代码>
data:text/javascript;base64,<base64编码的Javascript代码>
data:image/gif;base64,<base64编码的gif图片数据>
data:image/png;base64,<base64编码的png图片数据>
data:image/jpeg;base64,<base64编码的jpeg图片数据>
data:image/x-icon;base64,<base64编码的icon图片数据>
注意;如果使用URL参数传输或者使用application/x-www-form-urlencoded 传输Data URI数据,此时base64中的+ 和 / 会被转化需要程序作出对应的转换,如+ 会被转化成空格,这是接收到的参数只要整体替换即可
006-网页嵌入数据Data URI scheme的更多相关文章
- 网页优化URI(http URI scheme与data URI scheme)
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
- 前端-Data URI Scheme
了解Data URI scheme,首要要掌握一些URI.URL的基本知识,很多做移动端上开发的同学对这两个基本概念掌握的不够,本文首先会对这两个基本概念做一些简单的介绍. 基本概念 <HTTP ...
- Data URI scheme - 数据的uri模式
----------------------------------------------------------------------------------------------- Data ...
- JS魔法堂:Data URI Scheme介绍
一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...
- 关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- Data URI Scheme,base64
一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...
- 什么是data:image/png;base64,?一道关于Data URI Scheme的入门级CTF_Web题
一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...
- data URI scheme及其应用
data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取.这样从表面上看会降低一次HTTP的请求,实现了对于网页的优化(只是看了其它一些文章data URI ...
随机推荐
- [Android Studio] Using NDK to call OpenCV
NDK才是Android开发通向超高薪之路.(这句话,似乎四年前有云) 难点在于常用的non-free module (sift and surf) unsw@unsw-UX303UB$ pwd /h ...
- [Laravel] 06 - Project: from Usercase to View
故事背景 一.项目预览 From: https://www.imooc.com/video/12518 二.知识点 通过项目复习之前的重难点,在此列出并解决. /* implement */ 项目开始 ...
- 【中间件安全】Nginx 安全加固规范
1. 适用情况 适用于使用Nginx进行部署的Web网站. 2. 技能要求 熟悉Nginx配置,能够Nginx进行部署,并能针对站点使用Nginx进行安全加固. 3. 前置条件 1. 根据站点开放端口 ...
- CRUD的操作,增删改查!
.注释语法:--,# .后缀是.sql的文件是数据库查询文件 .在创建查询里,那个需要保存的对话框只是,保存查询. .在数据库里面 列有个名字叫字段 行有个名字叫记录 CRUD操作: create 创 ...
- Android编译系统入门(二)
Android.mk的使用方法 在上一篇Android编译系统入门(一)中我们只要介绍了Android系统使用make命令默认编译的依赖树是droid,而droid是一个伪目标,它有两个先决条件dro ...
- Docker Weave网络部署
Weave在Docker主机之间实现Overlay网络,使用业界标准VXLAN封装,基于UDP传输,也可以加密传输.Weave Net创建一个连接多个Docker主机的虚拟网络,类似于一个以太网交换机 ...
- got positional argument after named arguments.原因
- [No000013A]Windows WMIC命令使用详解(附实例)
第一次执行WMIC命令时,Windows首先要安装WMIC,然后显示出WMIC的命令行提示符.在WMIC命令行提示符上,命令以交互的方式执行 执行“wmic”命令启动WMIC命令行环境.这个命令可以在 ...
- [No0000E2]Vmware虚拟机安装 苹果系统 mac OS 10.12
1.下载并安装Vmware:实验版本号:VMware-workstation-full-12.5.5-5234757:(忽略网上说的这个版本不行.可以装C盘,不过转C盘后后面都要用管理员权限运行其他软 ...
- 一道与时间差有关的SQL面试题
题目: 一组通话记录(总共500万条):ID 主叫号码 被叫号码 通话起始时间 通话结束时间 通话时长1 98290000 0215466546656 2007-02-01 09:49:53.000 ...