I was recently working on speeding up a MIDI editor UI written in PIXI.JS which is part of my web synth project. The UI is fairly simple itself, but it needs to be efficient in order to render potentially thousands+ notes on the screen at once.
Here’s what the MIDI editor UI looks like:

Casey Primozic

A developer shares their experience optimizing a MIDI editor UI built with PIXI.JS that was consuming over 80% GPU on an M1 MacBook for a nearly static interface. Key optimizations included: removing mask usage in favor of zIndex layering, using Spector.JS to profile WebGL render passes, pre-rendering graphics to PIXI.RenderTexture sprites instead of cached Graphics objects, and caching entire containers as bitmaps rather than individual children. The result was a reduction from 238 render commands down to a single render pass, dropping GPU usage to near idle.

PIXI.JS Optimizations

Using Spector.JS for Profiling + Debugging ⌗

Pre-Rendering Containers vs. Children ⌗