Improve performance
rmzelle opened this issue · 10 comments
The website is still pretty slow, especially if we give users a query string like "https://www.zotero.org/styles?q=slow". Both initial page load and then the search/filtering.
Any easy fixes? Maybe swapping in a more recent jQuery version helps? 1.7 is a bit ancient by now, and there might have been some relevant performance fixes.
I guess that the page itself is not so small and I doubt that jQuery anyhow would give a difference. See here for the times of the different parts of the website (if we really reload the page):
http://tools.pingdom.com/fpt/#!/dsnrEv/https://www.zotero.org/styles?q=slow --> 15 seconds
http://www.webpagetest.org/result/160223_38_XT1/ --> 20 seconds
https://gtmetrix.com/reports/www.zotero.org/d9NO5U7N --> 6 seconds
Especially the search can be real slow, though. Loading a page with a search string like the one above takes over 10 seconds to finish on my own computer.
Hm.. as you see above I have under 2s in Firefox, but yes that seems much longer in Chrome... Some more browser tests: http://browsershots.org/https://www.zotero.org/styles?q=slow
jQuery 3.0 may get some show/hide performance improvements: http://blog.jquery.com/2016/01/14/jquery-3-0-beta-released/ (see .show() and .hide() methods)
That probably still wouldn't speed up Chrome, though (which really takes 20 seconds to finish loading https://www.zotero.org/styles?q=slow):
We're on this. (New, much faster version is actually mostly done, but our developer working on it is gone for a couple weeks.)
Want a beta-tester?
The updated page is out. Chrome should now be very fast, Firefox a bit less so but still much improved. If you've visited the page recently you might need to refresh to get the latest version.
Ah, the interface will stay the same? Can you tell us what sped things up the most? (just curious)
@rmzelle there are three factors that made the page faster:
- Firstly we've inverted the principle: we load all the styles data into memory then render DOM for matching nodes, where previously we would serve pre-rendered DOM with all the styles and then remove non-matching ones.
- Secondly we've greatly reduced the amount of DOM operations by employing a concept of virtual DOM - a modern concept popularised by ReactJS where an in-memory data structure cache is created, used to compute differences and then update the browser's displayed DOM.
- Finally, while re-writing for performance, we've implemented few clever optimisations that make filtering logic slightly faster.
Great, thanks for explaining. The webpage indeed feels much snappier.