javascriptperformancejquery-clone

Save DOM node and it's event handlers in the backend


I am trying to make a page which consists of many UI tools and visualizations. The problem is as these visualizations increase in a single page the performance of the browser goes down and becomes slower.

I was thinking that if I can save some UI nodes which user is not looking at and send it to server for saving and when users tries to come to the same node to visualize I can get the node and it's event handlers and initialize it again faster.

I tried jquery clone method but when I stringify the object to save it looses the event handlers. Has anyone tried to do this before?


Solution

  • I am not sure if i get the question right, but i assume that there is one scrollable page with lots of graphs and other visualizations. And problem is that page becomes too slow because of that (scrolling interacting, memory etc.). Have you tried to show user those visualizations only if they are in browser view and remove those which are not visible (including events). IF user scrolls back, it would get re-rendered once again (with initing events for this specific visualization).

    Hope this helps if it not possible solution let me know i will remove this answer