Improve performance

[rmzelle]

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.

[zuphilip]

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):

[rmzelle]

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.

[zuphilip]

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

[rmzelle]

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):

[dstillman]

We're on this. (New, much faster version is actually mostly done, but our developer working on it is gone for a couple weeks.)

[rmzelle]

Want a beta-tester?

[dstillman]

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.

[rmzelle]

Ah, the interface will stay the same? Can you tell us what sped things up the most? (just curious)

[tnajdek]

@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.

[rmzelle]

Great, thanks for explaining. The webpage indeed feels much snappier.