Question

我想知道使用样式作为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);

提前致谢。

Answer 1

内存管理

如果你把东西放到style，然后删除 - 它就消失了。但是，如果你把东西作为blob url然后删除 - 你仍然将blob url存储在内存中，它应该手动释放。请参阅此处的说明：https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Notes

相对路径分辨率

使用style内部的所有相对网址都会透明地解析（例如@font-face { src: url('/assets/font.ttf'); }。但是对于blob，这些相对URL被视为相对于blob url 本身的（即相对于blob:http://domain/some-hash）。因此，相对网址将在这种情况下有效停止工作。

Answer 2

由于Firefox尚不支持CSSStyleSheet和adoptedStyleSheets，因此您的技术对于在Constructable Stylesheets普及之前创建自包含的Web组件非常有用。请在此错误报告中查看周围的comments。

基于Blob的“链接样式表”与标准“样式”标记

2 个答案: