v1
- by dummdidumm 9/18/202400
Setup JavaScript
var roots = new WeakMap();
/**
* @param {Node} anchor
* @param {{ hash: string, code: string }} css
*/
function append_styles1(anchor, css) {
queueMicrotask(() => {
var doc = /** @type {Document} */ (anchor.ownerDocument);
if (!roots.has(doc)) roots.set(doc, new Set());
const seen = roots.get(doc);
if (seen.has(css)) return;
seen.add(css);
var root = anchor.getRootNode();
var target = /** @type {ShadowRoot} */ (root).host
? /** @type {ShadowRoot} */ (root)
: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
if (!target.querySelector('#' + css.hash)) {
const style = document.createElement('style');
style.id = css.hash;
style.textContent = css.code;
target.appendChild(style);
}
});
}
/**
* @param {Node} anchor
* @param {{ hash: string, code: string }} css
*/
function append_styles2(anchor, css) {
queueMicrotask(() => {
var root = anchor.getRootNode();
var target = /** @type {ShadowRoot} */ (root).host
? /** @type {ShadowRoot} */ (root)
: /** @type {Document} */ (root).head ?? /** @type {Document} */ (root.ownerDocument).head;
if (!target.querySelector('#' + css.hash)) {
const style = document.createElement('style');
style.id = css.hash;
style.textContent = css.code;
target.appendChild(style);
}
});
}
var anchor1 = document.createElement('div');
document.body.appendChild(anchor1);
var css1 = {
hash: 'hash1',
code: 'div { color: red; }'
};
var anchor2 = document.createElement('div');
document.body.appendChild(anchor2);
var css2 = {
hash: 'hash2',
code: 'div { color: red; }'
};ready
// simulate appending the same component repeatedly in an each block (cache hits)
for (var i = 0; i < 100; i++) {
append_styles1(anchor1, css1)
}
// simulate appending different components (no cache hit)
for (let i = 0; i < 100; i++) {
let anchor3 = document.createElement('div');
document.body.appendChild(anchor3);
let css3 = {
hash: 'hash'+i,
code: 'div { color: red; }'
};
append_styles1(anchor3, css3)
}ready
// simulate appending the same component repeatedly in an each block (cache hits)
for (var i = 0; i < 100; i++) {
append_styles2(anchor2, css2)
}
// simulate appending different components (no cache hit)
for (let i = 100; i < 200; i++) {
let anchor3 = document.createElement('div');
document.body.appendChild(anchor3);
let css3 = {
hash: 'hash'+i,
code: 'div { color: red; }'
};
append_styles2(anchor3, css3)
}