Optimise loading of assets

kittsville commented 7 years ago

Currently several of the JavaScript assets make direct reference in top level code to dependencies in other files. For example Cytoscape requires jQuery already be loaded. This creates an annoying dependency chain that greatly slows page loads. The JS assets need wrapping in container functions so they can be loaded asynchronously then activated in order of dependency.

kittsville commented 7 years ago

Given how slow the front-end is I think this takes priority over any other front-end issues.

kittsville commented 7 years ago

Turns out modern browsers load the scripts async anyway and then just execute them synchronously. Main thing slowing down page loads is that:

Cytoscape is massive (104KB gzipped)
Graph JSON is loaded after the rest of scripts
Graph JSON isn't cached
It takes time to render 581 nodes/edges

Wr.t. solutions:

Cytoscape can't exactly be reduced in size (short of building my own slimmed down version)
Could use FileReader API to pre-load the JSON
Caching was fixed in f1b391f5d7ba33c1a5df663ae6efd3f201fd7d7e
Could potentially avoid freezing by rendering bit by bit and displaying the graph as soon as the first few nodes have been rendered?

kittsville / Pyroon

Optimise loading of assets #13