@bytesnz

Jack Farley, Computer Engineer

During a recent major merge event, we noticed that one of the pages of our C2 app was taking ages to load (140s is Chrome and explosions in Firefox) when you navigated back to it. The page is the page for monitoring science data coming off the platforms and contains plots and a map. Four of the plots are using scale-colored markers for representing different values, so the data for the graphs needs to be converted into colors before the data is passed to Plotly.js for rendering.

Upon looking at a performance snapshot of the page transition back to the science page, I saw that the function that generates that data for Plotly.js was taking 20 seconds to run each time it ran for each of the color graphs. With other issues we are having, this ballooned up to the enormous 140s load time. This wasn't the case when the page was initially loaded - the function only took 200ms to run through exactly the same data.

A little bit more zooming in on the performance snapshop and I saw that the issue was the Vue reactive variable functions that took around 60ms for each value accessed. These functions are set as the Getters and Setters for reactive data and are called whenever a value from a reactive Object is accessed and with 30000 values to access for each graph, these were causing major delays.

The difference in the initial load and going back to the page was that during the initial load, the data value was set outside of the component itself, which meant it avoided being turned into a reactive pumpkin. Whereas, when going back to the page, the data value was returned by a call to get the cached data and was then stored in the component by the component itself. As there was data watchers on the data and the data was used inside the component template, the component made the data value reactive.

I confirmed my suspicions by converting the data value to a normal object using a quick and dirty JSON.parse(JSON.stringify()), which reduced the config function running time to a more acceptable 200ms. I then removed all references to it in the template, instead using a value that was set anytime the data value was changed using callbacks, and removed all functions watching the data value. Hey presto, problem solved.