" />

Performance in EaselJS

EaselJS is a very performance sensitive library. We’ve always worked hard to optimize code as we went, but with this release we put a lot of work into not only making things faster, but actively measuring improvements, and holding ourselves accountable for the performance impact of future changes.

The first step in improving performance is being able to measure and compare results. While still fairly limited, we’ve added a performance testing framework, and a number of tests in /extras/PerformanceTests/. These let us run quick tests as we work, as well as running reports comparing all of the versions of EaselJS against each other.

We also created FauxCanvas, that isolates time spent in our code versus time spent by the browser actually rendering pixels to screen.

This framework will mature over time, but it’s already helped us realize some very significant performance gains via three major changes (and a smattering of minor ones):

  1. The class re-architecture, specifically the move to defining properties on the instance instead of the prototype. This has made property manipulation and methods run a lot faster, though instantiation is a bit slower.
  2. Re-writing Graphics. The move to defined command objects and some adjustments to how we work with large lists has provided a great improvement, in particular when working with graphics with large numbers of instructions.
  3. Tick event propagation. We optimized the model for distributing the tick event through the display list, and reuse the tick event object to avoid instantiation. Because this event is dispatched every tick & potentially involves so many objects, this helps speed up the stage update noticeably.

So what does this mean? Property access on most objects is about 2x faster. The entire Stage.update() pass is twice as fast (exclusive of the browser’s render time). Vector graphics are noticeably faster, and filters apply 2-5x quicker.

All together, we’ve freed up a bunch of CPU cycles that you can either use to do more cool stuff, or just give your users’ batteries a bit of a break.

One thought on “Performance in EaselJS

Leave a Reply

Your email address will not be published. Required fields are marked *

© Copyright 2017