Optimizing JavaScript Sheet Music Rendering Engine - Performance Tweaks

Explore a detailed case study on optimizing a JavaScript sheet music rendering engine for web browsers. Dive into Adrian Holovaty's performance tweaks for Soundslice, covering topics such as responsive layout, canvas vs SVG, layering techniques, font optimization, rerendering strategies, and creative problem-solving. Learn about leveraging Chrome dev tools, managing garbage collection, utilizing JavaScript hidden classes, and implementing an app shell architecture. Gain insights into third-party library usage and Closure compiler optimization. This conference talk from performance.now() 2018 offers valuable lessons for web developers seeking to enhance JavaScript performance in complex rendering scenarios.

Introduction
Overview
Music Notation
Performance
Guiding philosophies
Canvas vs SVG
The naive way
Layers
Fonts
Rerendering
Thinking creatively
Chrome dev tools
Garbage collection
JavaScript hidden classes
Black magic
Thirdparty libraries
Closure compiler
Appshell architecture
QA time