Reducing a large single-page AJAX application (jQuery, ASP.net)

Question

I am currently creating a single page AJAX application. This is a large "registration form" that was built as a multi-stage wizard with several branches and different formulations, based on what options the user makes. At the end of the form is an editable overview page. After the user submits the form, he will send us a rather large address and a small letter to them. It seems like a very boring choice of your own adventure book.

The creep function has pushed the size of this application beyond the capabilities of the current architecture, and it is too slow to work on any slower computers (this is not good for a web application), especially those that use Internet Explorer. It currently has 64 separate steps, 5400 DOM elements, and only the .aspx file weighs 300 KB (4206 LOC). Downloading the application takes from 1.5 seconds on a fast machine with FireFox 3 to 20 seconds on a slower machine running under IE7. Moving between steps takes about the same amount of time.

So, back to the functions:

• Multi-stage, multi-track style wizard form (64 steps)
• The current step is shown in an order similar to this: http://codylindley.com/CSS/325/css-step-menu
• Multiple Validated Fields
• Change wording based on user choice
• The final, editable review page

I am using jQuery 1.3.2 and the following plugins:

• JQuery Form Wizard Plugin
• jQuery clueTip plugin
• jQuery sexycombo
• JQuery meioMask plugin

Like some custom scripts to load verbiage from an XML file, launch a review page and some aesthetic accessories.

I do not have a public publication, but I'm mostly looking for some tips on how to approach this project and make it easy and extensible. If anyone has any ideas regarding tools, textbooks or technology, this is what I am looking for. I'm a pretty novice programmer (I'm mostly a CSS / xHTML / Design guy), so speak softly. I just need a good attack plan to speed up this application. Any ideas?

Answer 1

One way is to break the steps into several pages / queries. To do this, you will need to store the state of the previous pages somewhere. You can use the database for this or some other method.

Another way would be to dynamically load the required parts through AJAX. However, this will not help with 54,000 DOM elements, but it will help with the initial loading of the page.

---

Based on the comments of the question, a quick way to "solve" this problem is to create a C # class that reflects all the fields in your question. Something like that:

public class MySurvey { public string FirsName { get; set; } public string LastName { get; set; } // and so on... } 

Then you would save it in a session (too easy ... I know this is not the best way) like this

 public MySurvey Survey { get { var survey = Session["MySurvey"] as MySurvey; if (survey == null) { survey = new MySurvey(); Session["MySurvey"] = survey; } return survey; } } 

Thus, you will always have an unnecessary Survey object that you can work with.

The next step would be to break this large form into smaller pages, say: step1.aspx, step2.aspx, step3.aspx, etc. All of these pages are inherited from the common base page, which will include the above property. After that, all you have to do is send the request from step 1.aspx and save it in Survey, similar to what you are doing now, but for each small part. When a redirect is made (Response.Redirect ("~ / stepX.aspx") to the next page. Information from the previous page will be stored in the session object. If they close the browser page, they will not be able to go back.

Instead of saving it in a session, you can save it in the database or in a cookie, but you are limited to 4K for cookies so that it does not fit.

Answer 2

I agree with PBZ, keeping individual steps would be ideal. You can, however, do this with AJAX. However, if you did, it would require some things that sound like it might be outside your skill set mainly for front-end development, you probably need to create a new database row and bind it to the identifier user session and each time they click on the next step, update this line. Perhaps even tie it to their IP address, so if all of this explodes, they can come back and click "remember me"? for your application to get it.

Regarding the optimization of the existing structure, jQuery is pretty hard when it comes to optimization, and adding a lot of jQuery modules doesn't help. I'm not saying that this is bad because it saves you a lot of time, but there are times when you use a module for one of its many functions, and you can replace the whole module with several jQuery lines included with javascript.

As for minimizing individual DOM elements, the step described above can help reduce it, because you are probably loading a lot of extensible functions for those modules that you may or may not need.

At the back end, I have to see the source to find out how to tell you to optimize it, but it looks like there are a lot of redundancy in separate steps, some of which can probably be reduced to functions that include a little recursion, or at least least delegate some of the tasks to each other.

I would like to help more, but without delving into your source, I can only offer basic strategies. Good luck though!

Answer 3

Agree, break the steps. 5400 elements are too many.

There are several options if you need to save them on one page.

• AJAX asks to return either raw HTML or an array of objects for analysis in HTML or DOM
• Frames or frames
• JavaScript to set innerHTML or control the DOM based on the current step. Please note that this parameter of IE7 and especially IE6 will have memory leaks. Threats to JavaScript memory in IE6 IE for more information.
• Use document.write to include only the .js file needed for the current step.

NTN.

Answer 4

Sounds like a jQuery optimization problem.

The first suggestion will be to switch as many people choose in the identifier selector as you can. I had an acceleration of more than 200-300x, since I can only go to the id attribute selection.

The second sentence is rather an attack plan. Since IE is your main area of ​​concern, I suggest using the IE8 debugger. You just need to press f12 in IE8 ... Tabs 3 and 4 of the script and profiler respectively.

Once you have done as much # 1 as you can to get the starting point, just go to the profiler, click on start-up profiling, do a few slow steps on the web page, and then stop profiling. You will see your longest method calls and just make your way.

For finer testing / dev, go to the script tab. Traps of breakpoints, etc. Exist for analysis. You can warp / test changes through the nearest window ... i.e. Put a breakpoint at which you want to change the function, run the function, execute javascript instead of the specific javascript in the immediate window.

When you think you have something clarified, comment on your changes to make sure they are truly improved. Just run the profiler, run the old code, stop it and pay attention to your test. Then start the profiler and use the nearest window to execute the changed function.

What about that. If this thread cannot take you far enough, as mentioned above, JQuery itself (and therefore its plugins) is not very efficient, and replacing it with standard javascript will speed everything up. If your plugins are slow, look at replacing them with other plugins.