31:T6ee,viewof asSource = Inputs.textarea({ value: `// Gauss-Jordan matrix inversion. Edit anything and press compile. const N: i32 = 48; const W: i32 = N * 2; // the scratch holds [ A | I ] side by side const m = new StaticArray(N * W); // unchecked() drops the bounds check: the AssemblyScript idiom for a hot loop. @inline function at(i: i32, j: i32): f64 { return unchecked(m[i * W + j]); } @inline function put(i: i32, j: i32, v: f64): void { unchecked(m[i * W + j] = v); } function fill(seed: u32): void { let z: u32 = seed; for (let i = 0; i < N; i++) { for (let j = 0; j < N; j++) { z = z * 1664525 + 1013904223; put(i, j, (z >> 8) / 8388608.0 - 1.0); put(i, N + j, i == j ? 1.0 : 0.0); } put(i, i, at(i, i) + N); // diagonally dominant, so it inverts } } export function invert(rounds: i32): f64 { let acc: f64 = 0; for (let r = 0; r < rounds; r++) { fill(r + 1); for (let c = 0; c < N; c++) { let piv = c; for (let i = c + 1; i < N; i++) { if (Math.abs(at(i, c)) > Math.abs(at(piv, c))) piv = i; } if (piv != c) { for (let j = 0; j < W; j++) { const t = at(c, j); put(c, j, at(piv, j)); put(piv, j, t); } } const d = at(c, c); for (let j = 0; j < W; j++) put(c, j, at(c, j) / d); for (let i = 0; i < N; i++) { if (i == c) continue; const f = at(i, c); if (f == 0.0) continue; for (let j = 0; j < W; j++) put(i, j, at(i, j) - f * at(c, j)); } } for (let i = 0; i < N; i++) acc += at(i, N + i); // trace of the inverse } return acc; } `, rows: 20, width: "100%", label: null, submit: "compile", spellcheck: false, monospace: true })32:Tb1d,toolchain = { // asc, assemblyscript, binaryen and long are attachments of this module. The graph is // linked by rewriting the import specifiers: minification leaves them as a literal // `from"x"` with no whitespace, so the substitution is exact rather than a guess. const t0 = window.performance.now(); // Every FileAttachment call is a literal: Observable static-analyses them and rejects // FileAttachment(variable) with "requires a single literal string argument". Lopecode // does not care, so the literal form is the one that runs in both. const FILES = { "binaryen-slim-131.js.gz": FileAttachment("binaryen-slim-131.js.gz"), "binaryen-slim-131.wasm.gz": FileAttachment("binaryen-slim-131.wasm.gz"), "asc-0.28.20.js.gz": FileAttachment("asc-0.28.20.js.gz"), "assemblyscript-0.28.20.js.gz": FileAttachment("assemblyscript-0.28.20.js.gz"), "long-5.3.2.js.gz": FileAttachment("long-5.3.2.js.gz") }; const stream = async (name) => (await FILES[name].stream()).pipeThrough(new window.DecompressionStream("gzip")); const gunzip = async (name) => await new Response(await stream(name)).text(); const gunzipBytes = async (name) => new Uint8Array(await new Response(await stream(name)).arrayBuffer()); const blobUrl = (src) => URL.createObjectURL(new Blob([src], { type: "application/javascript" })); const link = (src, deps) => Object.entries(deps).reduce((t, [spec, url]) => t.split(`from"${spec}"`).join(`from"${url}"`), src); // The slim build is not SINGLE_FILE, so the wasm is a real binary rather than 8.9MB // escaped into a JS string. instantiateWasm hands it straight to the emscripten // factory: no fetch, no locateFile guesswork. const wasmBytes = await gunzipBytes("binaryen-slim-131.wasm.gz"); const factory = (await import(blobUrl(await gunzip("binaryen-slim-131.js.gz")))).default; const binaryen = await factory({ instantiateWasm: (imports, cb) => { window.WebAssembly.instantiate(wasmBytes, imports).then((r) => cb(r.instance, r.module)); return {}; } }); window.__lopeBinaryen = binaryen; // asc imports "binaryen" expecting the instance const binaryenUrl = blobUrl(`export default window.__lopeBinaryen;`); const longUrl = blobUrl(await gunzip("long-5.3.2.js.gz")); const assemblyscriptUrl = blobUrl( link(await gunzip("assemblyscript-0.28.20.js.gz"), { binaryen: binaryenUrl, long: longUrl }) ); const ascUrl = blobUrl( link(await gunzip("asc-0.28.20.js.gz"), { assemblyscript: assemblyscriptUrl, binaryen: binaryenUrl }) ); const asc = (await import(ascUrl)).default; const el = htl.html`

asc ${asc.version} · slim binaryen 131 · toolchain ready in ${Math.round(window.performance.now() - t0)}ms

`; el.asc = asc; return el; }33:T531,compiled = { const out = {}; const t0 = window.performance.now(); let error = null, stderr = ""; try { const r = await toolchain.asc.main( ["main.ts", "--outFile", "main.wasm", "--textFile", "main.wat", "-O3", "--runtime", "stub"], { readFile: (n) => (n === "main.ts" ? asSource : null), writeFile: (n, d) => { out[n] = d; }, listFiles: () => [] } ); error = r.error ? String(r.error.message || r.error) : null; stderr = String(r.stderr && r.stderr.toString ? r.stderr.toString() : ""); } catch (e) { error = String((e && e.message) || e); } const ms = Math.round(window.performance.now() - t0); const ok = !error && out["main.wasm"]; const el = htl.html`

${ok ? `compiled in ${ms}ms · ${out["main.wasm"].length} bytes of wasm` : "compile failed"} ${stderr ? htl.html`

${stderr.slice(0, 4000)}

` : ""}

`; Object.assign(el, { binary: out["main.wasm"] || null, text: out["main.wat"] || null, error, ms }); return el; }34:T2324,benchmark = { const fig = (body) => htl.html`

${body}`; if (!compiled.binary) return fig(htl.html`

fix the program to run the benchmark

`); if (!compiled.binary.length) return fig(htl.html`

nothing to run

`); const PASSES = 60, ROUNDS = 24, RUNS = 2; // Both engines must start cold on every series, so both compilation caches have to // miss: the wasm gets a unique custom section appended, the JavaScript a unique // trailing comment. Without this the second run reuses the first run's compiled code // and the warm-up is invisible. const tag = (bytes, n) => { const name = new TextEncoder().encode("w" + n); return new Uint8Array([...bytes, 0, name.length + 1, name.length, ...name]); }; const runs = []; let k = 0, bad = null; for (let run = 0; run < RUNS; run++) { for (const impl of ["WebAssembly", "JavaScript"]) { k++; let call; if (impl === "WebAssembly") { try { const { instance } = await window.WebAssembly.instantiate(tag(compiled.binary, k), { env: { abort: () => { throw new Error("abort"); } } }); call = instance.exports.invert; } catch (e) { bad = String(e.message || e); } if (!call) { bad = bad || "the program must export invert(rounds: i32): f64"; } } else { call = new Function(jsReference.source + "\n//" + k)(); } if (!call) break; const ms = []; let v; for (let p = 0; p < PASSES; p++) { const t = window.performance.now(); v = call(ROUNDS); ms.push(window.performance.now() - t); } runs.push({ impl, ms, v: Number(v), total: ms.reduce((a, b) => a + b, 0) }); await new Promise((r) => window.setTimeout(r, 0)); // let the page breathe } if (bad) break; } if (bad) return fig(htl.html`

${bad}

`); const med = (a) => [...a].sort((p, q) => p - q)[a.length >> 1]; // performance.now() is quantised to 100us unless the page is cross-origin isolated, // which is 5% of a pass here — a median of quantised samples can only ever land on a // multiple of 0.1ms, which reads as a suspiciously round number. A 20% trimmed mean // over 40 passes averages the quantisation away (the passes dither across the // boundaries) while still rejecting the deoptimisation spikes. const tmean = (a) => { const s = [...a].sort((p, q) => p - q), k = Math.floor(s.length * 0.2); const t = s.slice(k, s.length - k); return t.reduce((p, q) => p + q, 0) / t.length; }; const TAIL = 20; const of = (impl) => runs.filter((r) => r.impl === impl); const settled = (impl) => tmean(of(impl).flatMap((r) => r.ms.slice(-TAIL))); const total = (impl) => med(of(impl).map((r) => r.total)); const clockMs = (() => { // measured, not assumed: it depends on cross-origin isolation let q = Infinity, prev = window.performance.now(); for (let i = 0; i < 200000; i++) { const t = window.performance.now(); if (t > prev) { q = Math.min(q, t - prev); prev = t; } } return q; })(); // First pass from which the next five average within 20% of the series' own floor. // A window rather than a single pass, so one noisy sample neither ends the warm-up // early nor extends it; forward-looking, so a cold first pass still counts as cold. const toFloor = (impl) => { const floor = settled(impl) * 1.2, w = 5; return med(of(impl).map((r) => { const i = r.ms.findIndex((_, j) => j + w <= r.ms.length && r.ms.slice(j, j + w).reduce((a, b) => a + b, 0) / w <= floor); return i < 0 ? r.ms.length : i + 1; })); }; const agree = new Set(runs.map((r) => r.v)).size === 1; // ---- chart ---- // Log y: a cold pass is 4-5x a warm one, and on a linear axis that one spike flattens // everything the chart is about. const W = 760, H = 300, ML = 52, MR = 96, MT = 22, MB = 38; const all = runs.flatMap((r) => r.ms).filter((v) => v > 0); const lo = Math.min(...all) / 1.3, hi = Math.max(...all) * 1.15; const x = (p) => ML + (p / (PASSES - 1)) * (W - ML - MR); const y = (ms) => H - MB - ((Math.log(Math.max(ms, lo)) - Math.log(lo)) / (Math.log(hi) - Math.log(lo))) * (H - MT - MB); const C = { JavaScript: "#c4463a", WebAssembly: "#2b6cb0" }; const line = (r) => r.ms.map((ms, i) => `${i ? "L" : "M"}${x(i).toFixed(1)},${y(ms).toFixed(1)}`).join(""); const ticks = [0.25, 0.5, 1, 2, 4, 8, 16, 32, 64].filter((t) => t >= lo && t <= hi); const svg = htl.html``; const card = (label, value, sub) => htl.html`

${label}

${value}

${sub}

`; const swatch = (impl) => htl.html`${impl}`; return htl.html`

${card("passes to full speed", htl.html`${toFloor("WebAssembly")} vs ${toFloor("JavaScript")}`, htl.html`${swatch("WebAssembly")} arrives at its floor; ${swatch("JavaScript")} is still being tiered up by V8`)} ${card("once both are warm", (settled("JavaScript") / settled("WebAssembly")).toFixed(2) + "×", `${settled("WebAssembly").toFixed(2)}ms a pass against ${settled("JavaScript").toFixed(2)}ms`)} ${card("the whole session", (total("JavaScript") / total("WebAssembly")).toFixed(2) + "×", `${Math.round(total("WebAssembly"))}ms against ${Math.round(total("JavaScript"))}ms for all ${PASSES} passes`)}

${svg}

${RUNS} independent runs of each, measured in this page just now. A pass is ${ROUNDS} inversions of a 48×48 matrix. Every series starts genuinely cold — a unique custom section on the wasm and a unique trailing comment on the JavaScript, so neither compilation cache can hit. The steps in the red line are V8 tiering the JavaScript up: interpreted, then baseline, then optimised. WebAssembly does the same thing once, between pass 1 and pass 2, and then stays at the dashed line. This clock resolves to ${clockMs.toFixed(3)}ms — ${(100 * clockMs / settled("WebAssembly")).toFixed(0)}% of a pass — so the two per-pass figures above are 20% trimmed means over ${TAIL * RUNS} passes, not single readings. ${agree ? htl.html`Both implementations agree on the trace of the inverse (${runs[0].v.toFixed(6)}).` : htl.html`The two implementations disagree, so the comparison is meaningless — the JavaScript below mirrors the program as shipped, not as edited.`}

`; }35:T6ea,jsReference = { // Kept as source, not as a function: every benchmark run needs a FRESH function // object, because a reused one is already optimised and that is what is being measured. const source = `const N = 48, W = N * 2; const m = new Float64Array(N * W); const at = (i, j) => m[i * W + j]; const put = (i, j, v) => { m[i * W + j] = v; }; function fill(seed) { let z = seed >>> 0; for (let i = 0; i < N; i++) { for (let j = 0; j < N; j++) { z = (Math.imul(z, 1664525) + 1013904223) >>> 0; put(i, j, (z >>> 8) / 8388608.0 - 1.0); put(i, N + j, i === j ? 1.0 : 0.0); } put(i, i, at(i, i) + N); } } return function invert(rounds) { let acc = 0; for (let r = 0; r < rounds; r++) { fill(r + 1); for (let c = 0; c < N; c++) { let piv = c; for (let i = c + 1; i < N; i++) { if (Math.abs(at(i, c)) > Math.abs(at(piv, c))) piv = i; } if (piv !== c) { for (let j = 0; j < W; j++) { const t = at(c, j); put(c, j, at(piv, j)); put(piv, j, t); } } const d = at(c, c); for (let j = 0; j < W; j++) put(c, j, at(c, j) / d); for (let i = 0; i < N; i++) { if (i === c) continue; const f = at(i, c); if (f === 0.0) continue; for (let j = 0; j < W; j++) put(i, j, at(i, j) - f * at(c, j)); } } for (let i = 0; i < N; i++) acc += at(i, N + i); } return acc; };`; const el = htl.html`

the JavaScript it is measured against — the same algorithm, written the way you would write it

${source}

`; el.source = source; return el; }36:[{"id":"0c4ac1c3d95af55dd15bdb6b3cc73202ed72aba45864aef162b8b80c0e5b614abf2d3b9eabc0e9bb529f31822362785f6cd1491388a7c2f85d2bb85113ae01ec","href":"https://static.observableusercontent.com/files/0c4ac1c3d95af55dd15bdb6b3cc73202ed72aba45864aef162b8b80c0e5b614abf2d3b9eabc0e9bb529f31822362785f6cd1491388a7c2f85d2bb85113ae01ec","name":"binaryen-slim-131.wasm.gz","type":"application/gzip","lastModified":1786038945098.539,"size":1481517},{"id":"ac2a310f9d53b868bf435b8d8f5ff48404ebcb8917e5dfc8f6839c391d1a1bd10e404356a2d7e131d7f69bed9ccc5c690783b753562e053e83dfe884056f8e99","href":"https://static.observableusercontent.com/files/ac2a310f9d53b868bf435b8d8f5ff48404ebcb8917e5dfc8f6839c391d1a1bd10e404356a2d7e131d7f69bed9ccc5c690783b753562e053e83dfe884056f8e99","name":"asc-0.28.20.js.gz","type":"application/gzip","lastModified":1786038946712.741,"size":170690},{"id":"6b1f58bcb9eb136e752e41cf7cf04d305db7180dd4fc49088f1670e9842c9e8b4491c28c6f6ba496a7e40d8f5eb6cf85f4164f102ad18a2ed92e77c9e668c7e5","href":"https://static.observableusercontent.com/files/6b1f58bcb9eb136e752e41cf7cf04d305db7180dd4fc49088f1670e9842c9e8b4491c28c6f6ba496a7e40d8f5eb6cf85f4164f102ad18a2ed92e77c9e668c7e5","name":"binaryen-slim-131.js.gz","type":"application/gzip","lastModified":1786038942244.887,"size":37488},{"id":"136ab070ae1415979bd640cde4cddc9d48691ff11f70562573d92a857cf7854ff13e945c71b828f8d7f7babc694020763d6ab78866f96dc130e50c859adf60cb","href":"https://static.observableusercontent.com/files/136ab070ae1415979bd640cde4cddc9d48691ff11f70562573d92a857cf7854ff13e945c71b828f8d7f7babc694020763d6ab78866f96dc130e50c859adf60cb","name":"assemblyscript-0.28.20.js.gz","type":"application/gzip","lastModified":1786038948313.143,"size":175678},{"id":"cc0e89402945f2e12431d1c7eccb7015826317d4a5af43a096f0f9f00be93b0aa90973036a2bbfd82da582f6746341f0f6537914b1e88de456dd4669908b7005","href":"https://static.observableusercontent.com/files/cc0e89402945f2e12431d1c7eccb7015826317d4a5af43a096f0f9f00be93b0aa90973036a2bbfd82da582f6746341f0f6537914b1e88de456dd4669908b7005","name":"long-5.3.2.js.gz","type":"application/gzip","lastModified":1786038949788.815,"size":9090}] 2f:{"title":"Slimmed AssemblyScript Compiler","cells":[{"id":3,"value":"headline_md = md`# Slimmed AssemblyScript Compiler \n\nAssemblyScript is a great target in notebooks, it can increase code performance, run in WebWorkers and remove the slow start Javascript has when first loaded. Its compiler size is ok (<2MB) if you are building something that needs high performance and your readers are willing to wait a little for it.\n\n~~~js\nimport {toochain} from \"@tomlarkworthy/assembly-script\"\n...\ntoolchain.asc(\"\")\n~~~\n\nBinaryen compiler was shrunk from **3.5MB** to **1MB** compressed by exluding optimizations and programs AssemblyScript does not use. ActionScript frontend itself is quite small, Binaryen is the bit that does the clever performance improving bit (optimizing compiler)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"watView = {\n if (!compiled.text) return htl.html`

`;\n return htl.html`

the WebAssembly text format asc emitted (${compiled.text.split(\"\\n\").length} lines)

${compiled.text.slice(0, 200000)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}