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

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所有相对URL里面是透明的解决（如@font-face { src: url('/assets/font.ttf'); }，但随着斑点，这些相对URL将被视为相对URL BLOB本身（即相对于blob:http://domain/some-hash）。所以相对URL将有效地阻止在这种情况下工作。