Optimizing JavaScript Sheet Music Rendering Engine - Performance Tweaks
Web Conferences Amsterdam via YouTube
Learn Excel & Financial Modeling the Way Finance Teams Actually Use Them
Most AI Pilots Fail to Scale. MIT Sloan Teaches You Why — and How to Fix It
Overview
Google, IBM & Meta Certificates — All 10,000+ Courses at 40% Off
One annual plan covers every course and certificate on Coursera. 40% off for a limited time.
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