基于Blob的'链接样式表'与标准'style'标签

Blob based 'link stylesheet' vs standard 'style' tag

本文关键字：标准 标签 style 链接 Blob 基于 样式      更新时间：2023-09-26

我想知道使用样式作为Blob链接有什么好处和区别：

<link rel="stylesheet" href="blob:http://www.domain.com/hash-here">

超过标准标签：

<style>...</style>

我的意思是Blob创建类似：

var blob = new Blob([css_here], {type: 'text/css'});
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
head.appendChild(link);

提前谢谢。

  • 内存管理

如果你把东西放成style，然后去掉——它就不见了。然而，如果你把东西放为blob-url，然后删除——你仍然把blob-url存储在内存中，它应该手动释放。请参阅此处的注释：https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Notes

  • 相对路径分辨率

使用CCD_ 2，内部的所有相对URL都被透明地解析（例如CCD_。但对于blob，这些相对url被视为相对于blob url本身的（即相对于blob:http://domain/some-hash）。因此，在这种情况下，相对url将有效地停止工作。

由于Firefox还不支持CSSStyleSheet和adoptedStyleSheets，因此您的技术对于在可构建样式表普及之前创建自包含的web组件非常有用。请参阅此错误报告中的周围注释。

相关文章：