html中什么是数据链接?_数据链接是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/androidioskl/article/details/123319224

数据链接(data url)

将目标文件的数据(二进制)直接写到路径位置。

如何书写

默认情况下是写保存着图片数据的文件夹路径，然后浏览器根据路径找到这个保存图片数据的文件夹，然后把文件夹里面的数据读取出来，然后解析数据显示成图片。

<img src="./img/a.jpg"/>

语法:data:MIME类型,数据这样就表示这里使用的是数据而不是路径

dataurl的意思是我不写数据的路径，而是直接将数据写在src上
不只是图片，js文件和css文件都可以用同样的方式

<link rel="stylesheet" href="data:text/css,h1{color:blue;}"/>

ps: 计算机上所有数据都是由二进制表示的包括图片,由二进制计解析成图片

请求: 我从我的电脑中向服务器发送消息，获取一些资源(比如html文件,图片等,请求就是跟服务器说我要哪些资源)。

响应: 服务器接收到了客户端的一条消息: 我需要服务器上某个的html页面，于是服务端将哪个html页面返回给客户端。这个过程就是响应。

客户端(浏览器)拿到这些html代码后,浏览器读HTML代码时,发现代码里有css路径、图片路径于是又向服务器请求图片和CSS样式，然后又响应,最后渲染(绘制)页面。

我们把text.css存储在本地和data url做对比，我们在network里可以看到使用传统的url方式需要请求本机文件，而用data url没有请求本地文件，因为data url相当于把数据嵌入在了html中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 会请求服务器文件 -->
		<link rel="stylesheet" href="text.css"/>
		<!-- 不会请求服务器文件 -->
		<link rel="stylesheet" href="data:text/css,h1{color:red}"/>
		<title></title>
	</head>
	<body>
		<h1>data url</h1>
		<h2>传统 url</h2>
	</body>
</html>

使用传统的url方式的text.css，可以看到页面发起了两次请求一次html文件本身，一次是css文件的本机请求。
在这里插入图片描述

可以看到使用data url的方式是和html文件一起请求过来，data url的方式就相当于是将数据直接嵌入到html中和html一起请求过来。
在这里插入图片描述

意义

优点:

减少了浏览器中的请求(不用请求文件，因为你直接把数据写到路径上了)。
减少了请求中浪费的时间。
有利于动态生成数据

缺点:

增加了资源的体积(文件变大，文件内容变多了)
导致传输内容增加(由于html内容增加，所以大小就增加了)，从而增加了单个资源传输时间。
不利于浏览器的缓存
浏览器通常会缓存(以前请求过的不会重新请求而是直接拿缓存的文件)图片文件、css文件、js文件，数据链接不会缓存。
使用base64会增加原来的体积的4/3

其实上面的缓存也是有办法缓存的，就是把data url嵌入到css的background中，即： background: url(data:MIME-type,数据)。由于css文件会被浏览器缓存，这样data url数据也会跟着css文件被缓存。

应用场景

但请求单个图片体积较小，并且该图片因为各种原因不适合做雪碧图,可以使用数据链接
图片由其他代码动态生成，并且图片较小,可以使用数据链接

base64:
一种编码方式，用于传输8Bit字节码的编码方式之一，Base64就是一种基于64个可打印字符来表示二进制数据的方法。

什么是可打印字符?
就是用户能从显示器上看的到的字符。

什么是控制字符?
是出现于特定的信息文本中，表示某一控制功能的字符，比如回车、换行、退格等。

ASCII中0～31及127(共33个)是控制字符或通信专用字符，其余为可打印字符。

在data url中为什么要先将图片转为base64呢?为什么不直接使用图片的二进制数据呢?

<img src="data:image/gif;base64,R0lGODlhAwADAIAAAP///8zMzCH5BAAAAAAALAAAAAADAAMAAAIEBHIJBQA7" width="100px" height="100px"/>

因为你是通过文本编辑器打开的，文本编辑器只能支持字符的形式，所以你不能直接将二进制数据写入到html文件，你自己将二进制的数据写入到html文件中会被表示成字符而不是二进制数，所以需要在data url的后面指明将图片数据编码成base64来表示。

ps: html文件也算一种文本编辑器