[Answer]-Would it be better to use Knockout.js in this situation?

1👍

I think knockout would be great for this, remember you can just use the visible binding to set display: none so it isn’t bad. Also, as per performance, it will likely do as good or better than jQuery since the binding has direct access to the element and doesn’t need to query the DOM.

There may be a fair bit of work involved though, if your server is returning html. You would instead want it to return the data as JSON and build the UI in the browser. Also unless you want individual values to update after they are loaded into view, you probably don’t even need the individual bits of data to be observables.

I don’t see why you think there would be more or less DOM elements by switching to knockout. Knockout uses templates which don’t need to be in the DOM prior to rendering.
Your current implementation is inserting chunks of html into the DOM and all else being equal they should be the same.

0👍

I wanted to comment but comment was too long so here is an answer

Optimizing performance of data visualisation web application

I’ve changed a data visualization tool after having a similar thinking;

it used to call a lot the server at every interaction,

now the server send lots of data & js is doing the rest;

i set index upon reception of data (up to 170kb ungzipped), then depending on user interaction dom is modified (no display:none all over the place, content are changed or detached; data is store in javascript array not in html elements)

result is amazingly fast (i was surprise);

you have to be carefull the way you append your element to the DOM, to create well structured object to access the least the DOM;

dunno about knockout but imo if it’s big & specific & you look for performance you’d better do the algorithm yourself (it’s not that hard just process your data into indexed arrays that will be used as is when events are triggered – ie one loop at reception, no more)

Leave a comment