I am working on a web application that allows user to view and interact with large (metabolic) networks displayed in SVG format. It can be viewd here link.
I have fairly large amount of jQuery code that handles different events. Particularly when user submits a form the submit function gets executed. The first thing I do in the function is display modal dialog that blocks UI and tells user that the page is loading.
$('#indexForm').submit(function() {
dialog.dialog('open');
...
After that the function manipulates elements on the webpage, loads large network XML via AJAX and appends it to the page. After all of the manipulations are complete the dialog disappears and user can start interacting with the page again.
My problem is in the latency that exists between the moment of clicking on submit button to the moment of showing the dialog. UI is frozen for a noticeable amount of time right after user presses submit.
I am suspecting that the browser is overwhelmed by the amount of elements that are on the page (SVG map has a lot of elements ~3mb) therefore it cannot react on the events like form submit immediately. Looking forward for any explanations and suggestions to improve my code and fix this problem.
The problem is in the size of the SVG rendered in on the webpage. Latency started to decrease once I tried to optimize the SVG data (I got read of many elements).