How I optimized my JavaScript sheet music rendering engine
summary
Soundslice is a JavaScript canvas renderer that trades SVG for raw bitmap speed, uses a windowed canvas to redraw only the visible rectangle, and subsets a 160-glyph music font to save 500k. Playback throttles redraws with requestAnimationFrame, memory shrinks via bit‑field-packed note flags and singleton fractions, and Closure Compiler advanced optimizations cut shipped JS to gzip ~86K. Also uses an HLS/video library and a slow‑audio library and caches an app shell via service worker for instant navigations.
AI-written summary · about
chapters (19)
- 0:00Introduction
- 0:52Overview
- 2:11Music Notation
- 6:52Performance
- 8:55Guiding philosophies
- 10:37Canvas vs SVG
- 12:25The naive way
- 14:30Layers
- 16:00Fonts
- 19:12Rerendering
- 22:13Thinking creatively
- 24:44Chrome dev tools
- 27:14Garbage collection
- 30:56JavaScript hidden classes
- 32:50Black magic
- 35:15Thirdparty libraries
- 38:25Closure compiler
- 41:02Appshell architecture
- 44:24QA time
related talks
31mBuilding a JavaScript Video Synthesizer for Live Performance
40mDelighting Users With Performant Apps
33mSaving the Web 16 Milliseconds at a Time
23mOptimizing HTML5 Games: 10 Years of Learnings
19mLessons learnt pushing browsers to the limit
49mRendering without lumpy bits
17mHigh performance design of angular
28mDecoding JavaScript: Loading Performance —