javascript - Blob based 'link stylesheet' vs standard 'style' tag - Stack Overflow

admin管理员组

文章数量:1318156

I wonder what is the benefit and difference when using styles as Blob links:

<link rel="stylesheet" href="blob:"> 

over the standard tag:

<style>...</style>

I mean Blob creation like:

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);

Thanks in advance.

I wonder what is the benefit and difference when using styles as Blob links:

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

over the standard tag:

<style>...</style>

I mean Blob creation like:

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);

Thanks in advance.

• javascript
• css
• http
• blob

Share Improve this question Follow edited Apr 17, 2016 at 18:34 juliancwirko asked Apr 17, 2016 at 14:51 juliancwirkojuliancwirko 1,2821212 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

• Memory management

If you put stuff as style, and then remove - it's gone. However, if you put stuff as blob url and then remove - you still have the blob url stored in memory, and it should be released manually. See the notes here: https://developer.mozilla/en-US/docs/Web/API/URL/createObjectURL#Notes

• Relative paths resolution

With style all relative urls inside are resolved transparently (e.g. @font-face { src: url('/assets/font.ttf'); }. But with blobs, those relative urls are treated as relative to the blob url itself (i.e. relative to blob:http://domain/some-hash). So the relative urls will effectively stop working in this case.

Since Firefox doesn't yet support CSSStyleSheet and adoptedStyleSheets, your technique is very useful for creating self-contained web ponents prior to the ubiquity of Constructable Stylesheets. See the surrounding ments in this bug report.

本文标签： javascriptBlob based 39link stylesheet39 vs standard 39style39 tagStack Overflow