an option to not use innerHTML and create elements using document.createElement

[cyan-2048]

Describe the problem

for some reason on older browsers, rendering DOM Elements using text is actually slow(this is based on my experience with KaiOS 2.5 app development).

another problem with using innerHTML is that it preserves the whitespace and won't minify the html.

div1 = element("div");
div1.innerHTML = `<div class="cubesLoading svelte-768m3i"><span></span> 
                    <span></span></div>`;
attr(div1, "class", "loading svelte-768m3i");

Describe the proposed solution

create elements

div1 = element("div");
div2 = element("div");
attr(div2, "class", "cubesLoading svelte-768m3i");
div1.appendChild(div2);
div2.appendChild(element("span"));
div2.appendChild(element("span"));
attr(div1, "class", "loading svelte-768m3i");

Alternatives considered

keep using innerHTML, but use a template and minify the html... This way a string can still be used, but without having to re-render it.

const template = element("template");
template.innerHTML = `<div class="cubesLoading svelte-768m3i"><span></span><span></span></div>`;

// function context
div1 = element("div");
div1.appendChild(template.cloneNode(true).content);
attr(div1, "class", "loading svelte-768m3i");

Importance

would make my life easier

[cyan-2048]

even in today's firefox innerHTML is still quite slow https://andrew.hedges.name/experiments/innerhtml/original.html

[cyan-2048]

oh wow so that's why inferno beats svelte even though inferno uses vdom.. because inferno only uses innerHTML once

[MathiasWP]

even in today's firefox innerHTML is still quite slow andrew.hedges.name/experiments/innerhtml/original.html

That speed test is one of the weirder i've seen lately... I have no idea how he manages to make the innerHTML example so slow - it is nowhere near realistic

[Rich-Harris]

Svelte 5 uses cloned document fragments, which avoids any innerHTML overhead past the initial setup, so I'll close this