Chart loading: preload the module graph, warm exchange connections, stop reading the bars twice a beat

[godzillacode0000]

Summary

Measured with one tab open and the exchange mocked (localhost, headless Chromium, no real GPU or Binance). The gains are real but modest on localhost; the module-graph one grows with request latency.

• Module graph fetched in parallel. Vela's workspace, vela-pinets, PineTS and ~140 small Zag files were discovered one import level at a time: 17 sequential waves, about 1.3 s of a 1.8 s boot. index.html now lists all 157 as <link rel="modulepreload">, generated by tools/modulepreload.py (--write after a vendor upgrade; the suite runs --check, so a stale list fails there).
  • First canvas 1,798 → 1,586 ms (median of 5); bars on chart 1,882 → 1,701 ms.
  • With 80 ms added per request: 3,372 → 2,844 ms (−16%).
• Exchange connections warmed with preconnect (api.binance.com, fapi.binance.com, the icon host), so the TLS handshakes overlap the module graph. Not measurable offline.
• The heartbeat read the chart's bars twice every 4 s, and when the chart hands none over (the normal case on this Vela) each read was a live venue fetch via /api/bars: 16 in 30 idle seconds → 8. It reads once; chartBars() shares one fetch between callers within 3 s; the server keeps a clean answer for 1.5 s. Empty, failed and partial answers are never kept; every caller gets its own array.

Notes for review

• The preload block must come after the import map. A module fetch that starts first freezes the map, every bare specifier ("pinets") fails to resolve and the workspace silently falls back to the bare chart. A first version did exactly that and looked 300 ms faster; I caught it by checking that the workspace really loaded (14 canvases, no full workspace failed log) in every A/B run. test_boot_speed.py pins the order.
• Generator note: vela's own vendor/vela/dist/workspace.js shares a file name with the page's entry workspace.js; the entry is compared by path.
• Not touched: the duplicated Vela / vela-pinets engines (classic bundles and ES modules, ~3.4 MB), the full spot and futures exchangeInfo downloads at boot, Vela's endpoint ping (vendored code), and the no-store headers (no measurable gain here).

Testing

• test_boot_speed.py, 17 tests: the block equals what the generator derives; it comes after the import map; every listed file exists and the whole graph is covered; preconnects present; one bars read per heartbeat; the shared-fetch behaviour (concurrent, within window, expiry, separate markets, independent arrays, empty/failed never kept); the server memo (hit, separate keys, expiry, failed and partial never kept, bounded size). Each fix mutation-checked.
• Browser: generated list vs the files the browser really loads: 157 of 157, none missing, none extra. Full suite 1034 tests, no failures.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GLsbckEp88WEwC41dfyMeS

---

Generated by Claude Code

[coldtea-pr-lens]

Nothing flagged · reviewed 177b3de

Architecture

Inside the changed components — 2 views

Component view — Frontend boot & preloading

Preload link derivation and early TLS connection warmup for chart assets

Component view — Market data caching

Two-tier in-flight sharing and memory memoization for chart kline requests

Data flow

View

• Architecture lens
• Data flow lens
• Expand every detail

Tip

The CLI's render reads .github/pr-lens.yml and applies your renames, exclusions and lane pins at draw time

🪧 More tips

• Run npx skills add coldteadotai/pr-lens, then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• Run npx @coldtea/pr-lens-cli analyze --base origin/main on a branch, then npx @coldtea/pr-lens-cli render .pr-lens/graph.json. Same lenses, your own model key, before the pull request exists
• Untick Architecture lens or Data flow lens under View to hide a diagram, or tick Expand every detail to open every section. The comment redraws in a few seconds
• Click the link under each diagram to open it on a canvas you can zoom, pan and step through
• The diagrams are links. Click one to open it on the canvas, then press W or click play to walk through the change
• Open a diagram on the canvas, then press W or click play to walk through the change one step at a time
• Set github.comment.collapsed: true in .github/pr-lens.yml to fold the comment behind one View architecture and data flow row. Drawing still runs as before
• Set github.draw: on-demand in .github/pr-lens.yml and PR Lens stops drawing pull requests on its own. Comment @pr-lens draw on a pull request when you want that one drawn
• Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and your model provider's key as its api-key to run PR Lens from your own CI. Any /chat/completions endpoint works
• Push a commit and the drawing stays, with a note that it is out of date. Tick Redraw in the note to draw the new head
• Switch GitHub to dark mode and the diagrams follow. The moving dots are this pull request's data in motion

---

Thanks for using PR Lens! It's built by Coldtea, free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Bluesky
• Mastodon
• Reddit
• LinkedIn