CODEWITHSUNDEEP
javascriptfreeze
alejandro rodriguez
alejandro rodriguez

Reputation: 11

Build javascript object without freezing

I am currently developing an admin-panel for adding and removing vertices from a graph. I have three large "network"-graphs with around 500 nodes each, which I load and build without problems. Now, only one is shown graphically in HTML5. Creating all the HTML5 objects for the graph is quite time consuming (around 5 seconds or something). The graphs might grow in a future and this time might increase. While building graph UI, the website is not responsive and I am trying to solve this. I have used 'setTimeout', but not with the expected results.

I was wondering if it was possible to build a javascript-Object in an external file that can be then called with ajax? Please note that my object to build is from a javascript function and HTML5 based!

Thank you.

Upvotes: 1

Views: 178

Answers (2)

Jim T
Jim T

Reputation: 12416

My assumptions with this question are that: 1) You're getting the data without any problems 2) It's the rendering into HTML that's causing the slowdown.

The DOM isn't the most responsive thing in the world. It sounds bizarre, but it's actually quite fast to build an enormous HTML string, then set that in one go with a call to div.innerHTML or $('#graph').html().

The reason is that once the string is built, the complex string processing and DOM operations happen in the browser which is written in highly optimised C or C++, not a javascript engine.

Another option is to split the rendering into sections and attempt to "yield" to other events using setTimeout.

With this you could iterate over your 500 nodes 50 at a time and call setTimeout(next, 0) to continue with the next 50 nodes. This would allow other events to be processed before doing too much work.

One side effect might be that the graph is shown in stages, as setTimeout will allow the DOM to render that part before continuing.

Upvotes: 1

MDrollette
MDrollette

Reputation: 6927

You could run the processor-intensive code on the server with nodejs and return just the JSON result with a simple ajax call.

Without seeing any code it's hard to give much more detail on how you would implement this. But if the object is already being built in JS it shouldn't be difficult to offload to node.

Maybe look at this answer for how to create a simple server response with node: Basic Ajax send/receive with node.js

Upvotes: 0

Related Questions