Data URI（统一资源标识符）是一种将文件数据直接嵌入到文档中的方案。其标准格式为：
data:[<MIME类型>][;base64],<数据>

组成部分：
· data: — 协议前缀，表明这是一个Data URI
· MIME类型 — 如 image/png、font/woff2、text/css 等，可选但建议指定
· ;base64 — 指示数据使用Base64编码，若省略则使用百分号编码
· ,数据 — 实际的文件内容（Base64字符串或URL编码文本）

例如：data:image/svg+xml;base64,PHN2ZyB4bWxucz0i...

✅ 优点：
· 减少HTTP请求数量，将小资源直接嵌入HTML/CSS中
· 避免额外的文件依赖，适合独立分发的单文件HTML
· 在电子邮件中嵌入图片可避免外部资源被阻止
· 适合小图标、logo、小字体等资源

❌ 缺点：
· Base64编码使文件体积增大约33%
· 无法被浏览器独立缓存（随宿主文档一起缓存）
· 大文件会导致HTML/CSS文件急剧膨胀
· 不适合频繁变动的资源（修改需重新编码）
· 长Data URI会降低代码可读性

以下场景特别适合使用Data URI：

· 小图标/Logo：小于10KB的图标直接内联，减少请求
· CSS背景图：纹理、渐变背景等小块图片
· HTML邮件：将图片嵌入邮件正文，避免被邮件客户端拦截
· 单文件工具/演示：需要自包含的HTML文件
· 字体文件：小体积的自定义字体（woff2等）
· SVG图标：直接使用Data URI引用SVG

一般建议文件小于20-50KB时才使用Data URI，超过此大小建议使用外部文件并利用浏览器缓存。

Base64是一种用64个可打印字符（A-Z, a-z, 0-9, +, /）来表示任意二进制数据的编码方式。

原理：
· 原始数据每3个字节（24位）被分为4组，每组6位
· 每组6位映射到64个字符中的一个
· 因此每3字节原始数据编码为4字节Base64字符
· 体积比 = 4/3 ≈ 1.33倍（增加约33%）

例如：一个30KB的PNG图片，Base64编码后约40KB，加上Data URI前缀总共约40KB+。这就是为什么Data URI只适合小文件的原因。

在HTML中使用：
<img src="data:image/png;base64,iVBORw0KG..." alt="图标">
<link rel="icon" href="data:image/x-icon;base64,...">

在CSS中使用：
background-image: url("data:image/svg+xml;base64,PHN2Zy...");
@font-face { src: url("data:font/woff2;base64,..."); }

在JavaScript中使用：
const img = new Image(); img.src = 'data:image/png;base64,...';

注意事项：在CSS中使用时，需要用url("...")包裹；在HTML属性中直接使用即可。

安全性：
· Data URI遵循同源策略，从Data URI加载的内容被视为来自独特的安全源
· 不要在Data URI中嵌入敏感信息，它们可能被日志记录或缓存
· 避免执行来自不可信来源的Data URI（如data:text/html,...中的脚本）
· 某些浏览器限制从Data URI打开的顶级导航（防钓鱼）

浏览器兼容性：
· 所有现代浏览器（Chrome、Firefox、Safari、Edge）完全支持
· IE8+支持，但IE8限制Data URI长度不超过32KB
· 移动端浏览器支持良好
· 推荐文件大小控制在1MB以内以确保广泛兼容