Skip to content

Make playground example switching instant - #3

Merged
elementmerc merged 1 commit into
mainfrom
feat/v0.1-scaffold
Jun 10, 2026
Merged

elementmerc merged 1 commit into
mainfrom
feat/v0.1-scaffold

Conversation

@elementmerc

Copy link
Copy Markdown
Owner

Follow-up to #2. Switching the example dropdown on the live site took about 1.2 seconds; this brings a warmed switch down to roughly 150ms.

Cause

Two network costs paid at click time:

  • loadPreset fetched each .alt with { cache: "no-cache" }, forcing a network round trip on every switch.
  • The first switch to a chart or diagram article downloaded its graphics library (uPlot, KaTeX, Mermaid) at that moment.

Fix

  • Cache preset sources in memory; a repeat switch renders synchronously with no network.
  • On idle (requestIdleCallback), prefetch every preset source and warm the lazy graphics libraries, so the first switch to any example is instant too. The runtime imports the same specifiers, so the browser serves them from its module cache.
  • Drop a late fetch result if the user has already switched away.

Measured (live, before vs target)

Before, per switch on the deployed site: cybersecurity 1157ms, cs-lewis 1228ms, paradox-of-genius 1251ms, languages 1037ms. Warmed local (no network) is ~115 to 215ms; the live warmed numbers will be posted on this PR once deployed. No crate changes; playground-only.

Each switch fetched the example over the network with the HTTP cache
bypassed, and the first switch to a chart or diagram article downloaded
its graphics library at click time, so a switch on the live site took
about 1.2 seconds. Cache preset sources in memory, prefetch them and warm
the graphics libraries on idle, and serve a switch synchronously from the
cache once warmed.
@elementmerc
elementmerc merged commit 12086b0 into main Jun 10, 2026
5 checks passed
@elementmerc

Copy link
Copy Markdown
Owner Author

Live measured, deployed, milliseconds per switch:

Example Before After (cold) After (warmed)
cybersecurity 1157 119 178
cs-lewis 1228 65 83
paradox-of-genius 1251 61 50
languages 1037 818 178

A real switch (idle warmUp completes while the visitor reads) lands around 50 to 180ms, down from roughly 1.2 seconds. The cold "languages" outlier is the case where the visitor switches before the idle prefetch finishes and several charts render at once; still well under the old number.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant