From a9916053d9bbad77143d34dd7fdd5ed8b2394413 Mon Sep 17 00:00:00 2001
From: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
Date: Thu, 28 May 2026 21:08:42 +0200
Subject: [PATCH] perf: use createElement instead of createElementNS for HTML
 elements (#18262)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

The current wrapper always calls `document.createElementNS(namespace ??
NAMESPACE_HTML, tag, options)` — even for HTML elements (the >99% case),
and even when `options` would be `undefined`. Two effects compound:

1. **Route HTML elements through `createElement`** — Blink has a fast
path that skips the namespace lookup `createElementNS` always performs.
2. **Omit the trailing `undefined` argument** — V8/Blink take a slower
path for `createElementNS(ns, tag, undefined)` (and `createElement(tag,
undefined)`) than for the bare 2-arg form. This applies symmetrically to
the SVG/MathML branch, where the wrapper now also avoids the `undefined`
3rd arg.

The wrapper dispatches to the fastest call shape for every input —
`{HTML, non-HTML}` × `{with is, without is}` × no `undefined` ever.

## Affects

Every place Svelte constructs a DOM element internally:
`<svelte:element>`, `run_scripts`, the per-component `<style>` injector,
the `{@html}` wrapper, and the `<template>` element used to clone string
templates.

## Numbers

Measured in headless Chromium (Chromium 145) using the browser bench
harness from #18261, 2–3 runs, median. Lower per-call is better; higher
hz is better.

### Raw call shapes (what each shape costs in the browser)

|                                             |       hz | per-call |
| ------------------------------------------- | -------: | -------: |
| `createElement(tag)`                        |  ~1,210k | ~0.83 µs |
| `createElement(tag, undefined)`             |    ~901k | ~1.11 µs |
| `createElementNS(NS_HTML, tag)`             |    ~913k | ~1.10 µs |
| `createElementNS(NS_HTML, tag, undefined)`  |    ~630k | ~1.59 µs |
| `createElement(tag, { is })`                |    ~484k | ~2.07 µs |
| `createElementNS(SVG_NS, tag)`              |    ~333k | ~3.01 µs |
| `createElementNS(SVG_NS, tag, undefined)`   |    ~303k | ~3.30 µs |
| `createElementNS(SVG_NS, tag, { is })`      |    ~245k | ~4.08 µs |

Two stable effects fall out:

- **Trailing `undefined` is consistently slower** than the bare form —
~26% on `createElement`, ~31% on `createElementNS` (HTML), ~10% on
`createElementNS` (SVG).
- **`createElement` skips a namespace lookup** that `createElementNS`
always performs — ~32% delta for equal-shape calls (`createElement(tag)`
vs `createElementNS(NS_HTML, tag)`).

### Per-case impact of this PR

| Case (namespace, `is`) | Old wrapper call | Old hz | New wrapper call
| New hz | Speedup |
| ----------------------------- |
--------------------------------------------- | --------: |
------------------------------ | --------: | ------: |
| HTML, no `is` (dominant path) | `createElementNS(NS_HTML, tag,
undefined)` | ~630k | `createElement(tag)` | ~1,210k | **~92%** (1.92×)
|
| HTML, with `is` | `createElementNS(NS_HTML, tag, { is })` | (slow) |
`createElement(tag, { is })` | ~484k | similar to above (just the
NS-skip) |
| SVG/MathML, no `is` | `createElementNS(ns, tag, undefined)` | ~303k |
`createElementNS(ns, tag)` | ~333k | **~10%** |
| SVG/MathML, with `is` | `createElementNS(ns, tag, { is })` | ~245k |
same | ~245k | no change |

No measurable change in JSDOM (both shapes route through the same JS
implementation there).

The headline gain — **~92% on the dominant HTML-no-`is` path** —
combines both effects roughly equally: dropping the `undefined` (~46%)
and switching to `createElement` (~32%).

Wrapper-vs-raw was also verified: the new wrapper measured to within ±2%
of raw `document.createElement(tag)` for the HTML-no-`is` case, so the
function-call indirection adds no measurable overhead.

See #18261 for the benchmark and methodology.

## Test plan

- [x] All 5881 runtime tests still pass (runtime-runes + runtime-legacy)
- [x] `<svelte:element xmlns={null}>` correctly falls back to HTML
(covered by existing `dynamic-element-dynamic-namespace` test)
- [x] SVG/MathML namespaces still go through `createElementNS`
- [x] Custom-element `is` option still honoured on both branches

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .changeset/create-element-fast-path.md             |  5 +++++
 .../svelte/src/internal/client/dom/operations.js   | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/create-element-fast-path.md

diff --git a/.changeset/create-element-fast-path.md b/.changeset/create-element-fast-path.md
new file mode 100644
index 0000000000..8b88a14163
--- /dev/null
+++ b/.changeset/create-element-fast-path.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+perf: use `createElement` instead of `createElementNS` for HTML elements
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index f6d05162ca..bc12a0b07e 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -233,6 +233,12 @@ export function should_defer_append() {
 }
 
 /**
+ * Branching here is intentional and load-bearing for perf. `createElement(tag)`
+ * hits a fast path in Blink that `createElementNS(NAMESPACE_HTML, tag)` doesn't,
+ * and passing an explicit `undefined` as the trailing options arg measurably
+ * slows both APIs. Funnelling every case through a single `createElementNS(ns,
+ * tag, options)` call would be smaller but slower on the HTML path.
+ *
  * @template {keyof HTMLElementTagNameMap | string} T
  * @param {T} tag
  * @param {string} [namespace]
@@ -240,9 +246,13 @@ export function should_defer_append() {
  * @returns {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element}
  */
 export function create_element(tag, namespace, is) {
-	let options = is ? { is } : undefined;
+	if (namespace == null || namespace === NAMESPACE_HTML) {
+		return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
+			is ? document.createElement(tag, { is }) : document.createElement(tag)
+		);
+	}
 	return /** @type {T extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[T] : Element} */ (
-		document.createElementNS(namespace ?? NAMESPACE_HTML, tag, options)
+		is ? document.createElementNS(namespace, tag, { is }) : document.createElementNS(namespace, tag)
 	);
 }