基本上是标题中的问题。
许多人都曾有关于如何创建数据URI的问题stackoverflow和其中的问题。
我的问题是为什么使用数据URI？
这样做有什么好处：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
过度执行：
<img src="dot.png" alt="Red dot" />
我知道一个服务器端的开销可能较小（也许），但是使用data URI的real优点/缺点是什么？
根据Wikipedia：
优点：
HTTP请求和标头流量对于嵌入式数据而言不是必需的，因此每当编码开销时，数据URI消耗的带宽就更少内联内容作为数据URI小于HTTP开销。例如，对于600字节长的图像，所需的base64编码将为800字节，因此，如果HTTP请求要求的字节数超过200字节的开销，数据URI会更有效。
用于传输许多小文件（每个文件少于几千字节），这可以更快。 TCP传输往往开始缓慢。如果每个文件都需要一个新的TCP连接，则传输速度受往返时间的限制，而不是可用带宽的限制。使用HTTP keep-alive可以改善这种情况，但可能无法完全缓解瓶颈。
当浏览安全的HTTPS网站时，网络浏览器通常要求通过安全连接下载网页的所有元素，否则由于安全元素和不安全元素的混合使用，会通知用户降低的安全性。在配置错误的服务器上，HTTPS请求比普通的HTTP请求具有显着的开销，因此在这种情况下将数据嵌入数据URI可能会提高速度。
通常将Web浏览器配置为仅输入一定数量（通常是两个）与域的并发HTTP连接，因此是内联数据释放了其他内容的下载连接。
对外部资源的访问受到限制或限制的环境禁止或禁止引用时可能嵌入内容在外部。例如，高级HTML编辑字段可以接受粘贴或插入的图像并将其转换为数据URI向用户隐藏外部资源的复杂性。或者，浏览器可以从以下位置转换（编码）基于图像的数据将剪贴板粘贴到数据URI，然后将其粘贴到HTML编辑字段中。Mozilla Firefox 4支持此功能。
可以将多媒体页面作为单个文件进行管理。电子邮件消息模板可以包含图像（用于背景或签名）没有图像看起来像是“附件”。
缺点：
数据URI不会从其包含的文档中单独缓存（例如CSS或HTML文件），因此每次包含文档将重新下载。内容必须重新编码，每次进行更改时都会重新嵌入。
Internet Explorer 7版（截至2011年1月，大约占市场的15％），缺少支持。但是，可以通过提供特定于浏览器的内容来克服这一问题。Internet Explorer 8将数据URI的最大长度限制为32 KB。
数据作为简单流包含在内，许多处理环境（例如Web浏览器）可能不支持使用容器（例如多部分/替代或消息/ rfc822）来提供更大的复杂性，例如元数据，数据压缩或内容协商。
Base64编码的数据URI的大小比其二进制文件大1/3当量。 （但是，如果使用HTTP，此开销将减少到2-3％服务器使用gzip压缩响应）数据URI使响应更加有效安全软件很难过滤内容。
根据other sources-在移动浏览器中，数据URL的速度明显慢。
数据URI的好用法是允许下载客户端生成的内容，而无需借助服务器端的“代理”。这是我能想到的一些示例：
[主要是，如果我不能（由于某些原因）使用CSS sprites，并且我不想下载将用于样式设计的每个小图像，我都会发现使用此方法。
我已经在多个（C ++，Python）命令行应用程序中使用数据URI方案来生成报告
[我同意BiAiB，数据URI的真正价值在于使客户端生成的内容可以作为文件下载使用，而无需服务器往返。
我想技术需要首先赶上。如果您在这里的视野稍微受限怎么办？如果数据uri方案是您的站点，该怎么办。放这个**
data:image/svg+xml;charset=utf8,%3Csvg class='svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='auto' width='100vh' viewBox='0 0 1920 1080' preserveAspectRatio='xMinYMin slice'%3E%3Cstyle%3E @import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css'); @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900 &%2363;display=swap'); .svg { position: relative !important; width: 203vh !important !; height: auto !important; left: 0 !important; top: 0 !important; width: 203vh; padding: 0; background-size: cover; padding-bottom: 10%25 !important; } text { font-family: Roboto, sans-serif, regular; font-weight: 300; font-size: 14px; fill: white; color:white; } .text:hover { fill: %2300b7ff; } .cards { stroke: %23000; } .cards:hover { stroke: %232C5CB6; transition-duration: .1s; transition-delay: .05s stroke-width:10px } .introanimation:hover { animation: swapper .1s .1s linear forwards; animation-timing-function: cubic-bezier(.5s, 8s, 9s, 1s); animation-iteration-count: 2; } %3C!-- animation: swapper 1s linear forwards; --%3E .top-bar { background-image: linear-gradient { 90deg, %23010101, %23333, %23010101 } } @keyframes swapper { 0%25 { stroke: %232C5CB6; stroke-width: 1; } 69%25 { stroke: %232C5CB6; stroke-width: 1; } 70%25 { stroke: blue; stroke-width: 5; } 90%25 { stroke: %237d0000; 100 { stroke: %237d0000; stroke-width: 1px !important } } } %3C/style%3E%3Cdefs%3E%3Ca href='%23' class='STEALTH'%3E%3Ctext id='tacktical'%3E%3C/text%3E%3C/a%3E%3Cpath id='b' d='M0 0h214v28H10V0z' /%3E%3Cpath id='c' d='M0 0h1920v73H0V0z' /%3E%3Cpath id='a' d='M0 0h1920v1080H0z' /%3E%3Cpath id='z' d='M0 0L510 0L510 370L0 370L0 0Z' /%3E%3ClinearGradient id='MyGradient'%3E%3Cstop offset='0%25' stop-color='%23111' /%3E%3Cstop offset='35%25' stop-color='%23333' /%3E%3Cstop offset='65%25' stop-color='%23333' /%3E%3Cstop offset='90%25' stop-color='%23111' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cuse fill='%23111' xlink:href='%23a' /%3E%3Cpath fill='%237d0000' d='M232 43h1920v72H232V43z' /%3E%3Cpath d='M0 0h232v1080H0V0z' /%3E%3C!-- %3Cg transform='translate(1.5 102)'%3E%3Cuse fill='%23666' xlink:href='%23b' /%3E%3C/g%3E --%3E%3Cuse xlink:href='%23e' /%3E%3Cg transform='translate(1.5 102)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='150' y='120' text-anchor='middle'%3EHOME %3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='120' style='font-family: FontAwesome;'%3E &%23xf015; %3C/text%3E%3C/g%3E%3Cg transform='translate(1.5 161)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='130' y='180' text-anchor='middle'%3EDASHBOARD %3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='180' style='font-family: FontAwesome;'%3E &%23xf0e4; %3C/text%3E%3C/g%3E%3Cg transform='translate(1.5 221)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='104' y='240' text-anchor='middle'%3EDATA VISUALIZATION%3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='240' style='font-family: FontAwesome;'%3E &%23xf200; %3C/text%3E%3C/g%3E%3Cg transform='translate(1.5 281)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='122' y='300' text-anchor='middle'%3ECOMMUNIQU%C3%89%3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='300' style='font-family: FontAwesome;'%3E &%23xf674; %3C/text%3E%3C/g%3E%3Cg transform='translate(1.5 341)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='125' y='361' text-anchor='middle'%3ECODE EDITOR%3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='361' style='font-family: FontAwesome;'%3E &%23xf015; %3C/text%3E%3C/g%3E%3Cg transform='translate(1.5 401)'%3E%3Cuse fill='%231A1A1A' xlink:href='%23b' /%3E%3C/g%3E%3Cpath d='M1884 43h36v1037h-36V43z' /%3E%3Ca href='https://jasonalexanderchase.github.io/portfoliohome/'%3E%3Ctext class='text' x='115' y='421' text-anchor='middle'%3ESQL PORTFOLIO%3C/text%3E%3C/a%3E%3Cg%3E%3Ctext class='text' x='190' y='421' style='font-family: FontAwesome;'%3E &%23xf015; %3C/text%3E%3C/g%3E%3Cg transform='translate(254 150)'%3E%3Cpath d='M0 0L1607 0L1607 384L0 384L0 0Z' transform='translate(3 3)' class='cards introanimation' /%3E%3C/g%3E%3C!-- card play ie layouts--%3E%3Cg transform='translate(254 582)'%3E%3Cuse fill='%23000000' xlink:href='%23z' class='cards introanimation' /%3E%3C/g%3E%3Cg transform='translate(804 582)'%3E%3Cuse fill='%23000000' xlink:href='%23z' class='cards introanimation' /%3E%3C/g%3E%3Cg transform='translate(1354 582)'%3E%3Cuse fill='%23000000' xlink:href='%23z' class='cards introanimation' /%3E%3C/g%3E%3Cuse xlink:href='%23c' fill='url(%23MyGradient)' /%3E%3Cuse xlink:href='tacktical' class='STEALTH' height='10%25' style=' postion:relative ' width='20%25' fill='white' x='10' y='5' /%3E%3C/svg%3E** data uri直接在您的浏览器中。这是我的管理控制台。它作为所有浏览器上的我的主页都存在于url中，并进行同步，并且支持长数据uri方案。多数民众赞成所有浏览器，除了ie和edge。