ASP.net UpdatePanel Slow Performance compared to jquery Ajax

I guess this won't come as a surprise for most of us veterans who have been using UpdatePanels for a little bit. For those who don't know what UpdatePanels are or do, a quick intro - UpdatePanel is a control shipped with ASP.NET Ajax that Ajaxifies server side calls from any controls that are put inside it. You can set the EnableHistory attribute in ScriptManager to true and you get the built in history (Ajax back button problem) as well! It's all out of the box and can save quite a bit of development time only but it's slow as sh-t!

Let's look at a "case study" (that was my own project) -

Problem: Implement a "wizard" like functionality where the user steps through a number of questions presented one at a time.

Catch: Save answers to each question to the database as the user moves to the next question.

Bigger Catch: There must not be any page refreshes as user moves from one question to the next.

Insanely big Catch: Hitting browser's back button should take user to the previous question!

Two Ajax & Browser history solutions:

- ASP.NET Ajax's UpdatePanel with ScriptManager's EnableHistory set to True - UpdatePanel takes care of Ajax and EnableHistory attribute takes care of browser's back button.

- jquery ajax calls to a webservice with RSH (Really Simple History) - basically saving the answers (to the questions in wizard) via asynchronous jquery Ajax calls to some webservice. This takes care of stepping through the wizard and saving data without page refresh problems. Browser's history (back button) problem is solved by using RSH (Really Simple History) library.

Comparison of UpdatePanl ajax and jquery's ajax -

Performance comparison of UpdatePanel and jquery ajax: UpdatePanels suffer from some huge performance problems and can be ridiculously slow. As you see in the screenshot, 13 requests (yeah not a good number!) required 2MB. These requests are made by controls like DropDownLists, RadioButtons and Buttons, all wrapped in an UpdatePanel.


RSH and jquery ajax implementation, on the other hand, is much faster! As you see in the screenshot, we got away with only 103Kb of data with 20 jquery ajax calls! Compared to UpdatePanel, this is like a 300x improvement!


The primary reason is that UpdatePanel posts back too much data but with jquery ajax calls, you send *only* the data you need to, to the server. Further, UpdatePanels try to recreate the whole control tree (Page) before sending it back in the response but with the jquery ajax thing you are in charge and you just need to hide the current question and show the next one (which would obviously be faster)!

Safari problems with UpdatePanel: As expected, UpdatePanels run even more slow in Safari and as expected (again) jquery ajax calls take about the same time. The below screenshots will help it visualize more clearly

UpdatePanel performance in Safari -



jquery ajax performance in Safari



As you can see, the performance gains in Safari are rather huge!

Problems with URL fragments usage by UpdatePanels and RSH: This is again very important if your website has multiple tools / functionalities that rely on URL fragments. UpdatePanels don't play with any other tool / functionality that uses URL fragments. Yes, since UpdatePanels store their "history" in the URL fragments, if something else is also using URL fragments then ScriptManager's Navigate event (triggered by browser's back button) will not find it's "history". This can be resolved though by putting in some checks to ensure that the current URL fragment is the one to be used by the UpdatePanel. Switching to RSH for all history management resolves this issue perfectly.

Development times comparison: Surprisingly, UpdatePanel ajax implementation doesn't save too much time over the jquery ajax implementation. If jquery were to be absent, then yeah UpdatePanel would generate quite a bit of code for us even for regular asynchronous web service calls. You won't be churning out 500 lines of jquery code for every line of UpdatePanel code! With jquery's ajax method, the amount of code written is pretty much the same (if not less)!

Development technologies comparison: This is one of the key factors. With UpdatePanel you can write the code (saving data, moving to next question etc) in a server side language (C#, VB.NET etc) but with jquery ajax you are stuck with a client side language (javascript / jquery). The server side languages generally have better debugging tools and better built in features to allow better implementation from design, maintenance and coding efficiency point of view. But it can very well be a personal thing.

Verdict: jquery ajax calls with RSH prove to be a better option if speed and versatility (across different browsers and OS etc) is a major concern. UpdatePanels might work better if the technological expertise and macro design details is a more important.

To learn how to use RSH, click - RSH (Really Simple History) for Ajax back button problem

To learn how to use jquery ajax, click - jquery ajax calls to webservices