LearnNewsExamplesServices
Frontmatter
id9263
titleCreate Frontend Guide 5: OffscreenCanvas & Parallel Rendering
stateClosed
labels
documentationai
assigneestobiu
createdAtFeb 22, 2026, 7:10 PM
updatedAtFeb 22, 2026, 7:37 PM
githubUrlhttps://github.com/neomjs/neo/issues/9263
authortobiu
commentsCount1
parentIssue9257
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtFeb 22, 2026, 7:37 PM

Create Frontend Guide 5: OffscreenCanvas & Parallel Rendering

Closed v12.0.0 documentationai
tobiu
tobiu commented on Feb 22, 2026, 7:10 PM

Objective: Explain the "Zero-Allocation" Canvas Dedicated Worker architecture used for the DevIndex Header and Sparklines.

Rationale: The DevIndex application uses OffscreenCanvas heavily to ensure 60fps animations (like the "Luminous Flux" header and the "Living Sparklines" in the grid) never block the main thread or the App Worker, proving the power of Neo.mjss multi-threaded model even during heavy data operations like scrolling or filtering.

Tasks:

  • Create learn/guides/devindex/frontend/OffscreenCanvas.md.
  • Detail the Dedicated Worker architecture for Canvas (Neo.canvas.Base), noting that using Dedicated Workers enables direct use of requestAnimationFrame (rAF) inside the worker.
  • Explain the "Zero-Allocation" rendering strategy (Float32Array buffers, cached gradients) to prevent GC stutters.
  • Explain the "Sparse Animation Strategy" used in Neo.canvas.Sparkline to handle 50+ charts without overloading the GPU.
  • Update learn/guides/devindex/tree.json to link the new guide.
tobiu added the documentation label on Feb 22, 2026, 7:10 PM
tobiu added the ai label on Feb 22, 2026, 7:10 PM
tobiu assigned to @tobiu on Feb 22, 2026, 7:11 PM
tobiu added parent issue #9257 on Feb 22, 2026, 7:11 PM
tobiu
tobiu Feb 22, 2026, 7:34 PM

Input from Gemini 3.1 Pro:

✦ I have completed the OffscreenCanvas.md guide.

Key additions:

  • Created a strong narrative around the "Quintuple-Threaded" architecture (Main, App, VDom, Data, Canvas) explaining how they work in parallel to prevent Main Thread blocking.
  • Included a Mermaid diagram illustrating the 5-actor topology and their data flow.
  • Described the "Speed Up" Flex: how the Luminous Flux header animation intentionally doubles in speed during heavy grid scrolling to prove the Main Thread layout thrashing doesn't impact the Canvas Dedicated Worker.
  • Explained the "Sparse Animation Strategy" (Master Loop) for handling 50+ living sparklines simultaneously without melting the GPU.
  • Detailed the "Zero-Allocation" physics strategy (TypedArray buffers, pre-cached CanvasGradients, geometry caching) to eliminate GC stutters and maintain a locked 60fps via requestAnimationFrame.

The changes have been amended to the previous commit and forcefully pushed to the remote repository. Closing this issue.

tobiu closed this issue on Feb 22, 2026, 7:37 PM
tobiu referenced in commit 299e63e - "docs: Create Frontend Guide 5 (OffscreenCanvas) (#9263)" on Feb 22, 2026, 11:06 PM