Blob based on “link stylesheet” and standard “style” tag

Question

I wonder what the benefits and difference are when using styles as Blob links:

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

above the standard tag:

<style>...</style>

I mean creating a blob 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.

Answer 1

• Memory management

If you put the material as style, and then delete it, it has disappeared. However, if you put the material as a blob url and then delete - you still have a blob url that is stored in memory and must be manually released. See Notes here: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Notes

• Relative Path Resolution

style URL (, @font-face { src: url('/assets/font.ttf'); }. blobs URL- url ( blob:http://domain/some-hash). , URL- .

Answer 2

Firefox CSSStyleSheet adoptedStyleSheets, - . .