Performance optimize your Opera Extension!
Saturday, May 14, 2011 4:07:11 PM
So my goal was to remove jQuery from the code and use the Selectors API instead. My luck that I only used heavily the CSS selectors for DOM selection and manipulation. So it was possible to remove jQuery completely. I never thought of speeding up the extension by doing that. I've thought that jQuery is extremely fast and that there would be no significant changes.
It took me about one day to completely remove jQuery and replaces with window.document.querySelector and window.document.querySelectorAll. I was totally inexperiences with the Selector API till then, so it took so long. Someone with more practice can do this in a fraction of the time.
Now i set up a speed test case, because I wouldn't slow the extension down by this operation. So I designed a daily use case with my extension with normal (for some users) amount of data generation and display. I've measured the time from clicking a link, messaging to the background script, reading from a database with 2,5 MB of data and ~1.600 saved video information and message 200 video information back, displaying them, doing some event handler creation and paging tool generation. Remember, its the same extension, the same work flow, the same code, expect for the changes of removing jQuery and adding the Selectors API.
The results astonished me, even by looking at it, i could see a significant improvement. So I did this test case 10 times in a row for both versions of my extension and timed it. Here are the results:
In blue, the old version with jQuery and in red the new version with the Selectors API. The average time for both in milliseconds: jQuery: 2595ms, Selectors API: 349ms
Info: No offense to jQuery, I loved and love jQuery, its an amazing tool and I surly will use it in other projects.