Making media and blog panels scream
Recently we noticed that those panels used to manage files and blog posts in Edicy became quickly slower when they contained many objects in it. These scrollers ran the code we created for private beta version and hadn't changed much since then. So this part was a good candidate for refactoring and here's how we reduced loading time from 52 seconds to 1 second on panels with huge number of elements.
The problem laid in scroller initialization code which measured the width of scroller so that panel width would be the sum of widths of all objects in it. To do that, it calculated width of each object but calculating it for only one object should have been enough :) That's because all objects in scroller have the same width. By reducing number of expensive element width calculations we came from this...
...down to this:
But we didn't want to stop here. The scroller was now optimized, but objects inside it hadn't. Each object in scroller has several event listeners attached to handle mouseover, mouseout, delete, select, drag-and-drop behaviours etc. But all these event listeners didn't have to be initialized right away but only when user moves mouse over it.
By switching to lazy event initialization, we reduced initial loading time by another couple of seconds:
And the spinning wheel of death is now gone. We hope you enjoy faster Edicy as much as we enjoy optimizing it!.