Optimizing JavaScript Sheet Music Rendering Engine - Performance Tweaks
Web Conferences Amsterdam via YouTube
AI Engineer - Learn how to integrate AI into software applications
You’re only 3 weeks away from a new language
Overview
Why Pay Per Course When You Can Get All of Coursera for 40% Off?
10,000+ courses, Google, IBM & Meta certificates, one annual plan at 40% off. Upgrade now.
Get Full Access
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.
Syllabus
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
Taught by
Web Conferences Amsterdam