A web application recently exemplified much different performance metrics between browsers ( IE 7, 8, 9, Chrome and FireFox ). At the time, our client’s browser was restricted to IE 7, which posted the longest render times out of all the browsers. A page loaded in IE 7 took anywhere from 15-45 seconds to load. The same page took much less in recently released browsers as outlined below.

To understand what is going on under the hood a more advance profiler is required. A tool providing details for page rendering and JavaScript NOT just page speed and browser intricacies. Given the simple data metrics below, its quite clear IE 7 choked on page render but the root cause was not clear.

Browser Comparisons ( loading a certain customer page )

• IE 7 15-45 seconds.
• IE 8 10-23 seconds.
• IE 9 3-10 seconds.
• FireFox 8 4-12 seconds.
• Chrome 3-8 seconds.

A hunch, IE 7 and DevExpress do not play well together but there is no analysis backing the claim. In walks dynaTrace! After profiling the application with dynaTrace AJAX Edition, the page performance issue became quite clear.

General Page Overview

The ASP.NET 3.5 WebForms page leverages DevExpress ASP.NET Control Suite 10.1.5 heavily, custom JavaScript, custom server controls and leverages DevExpress ClientSideScripts for most, it not all controls. Yes, DevExpress ClientSideScripts is obtrusive JavaScript, yikes. I prefer unobtrusive JavaScript but that is not in the cards with DevExpress at this time. The page loads a large amount of data into DevExpress ASPxTabControl tabs. The tabs leverage ASPxComboBox, ASPxMemo, ASPxDateEdit. The master page is also leveraging DevExpress ASPxSplitter to provide more visible screen.

dynaTrace Profiler

A FREE Developer tool supporting Internet Explorer and FireFox designed to help developers optimize Web 2.0 applications. Analyze the page speed, rendering, JavaScript and DOM, and provide automatic recommendations.

Take a tour.

1. Speed Page Load
2. Diagnose IE and Firefox
3. Optimize Page Rendering
4. JavaScript/DOM Tracing
5. Web Test Automation

Conclusion

dynaTrace AJAX Edition Profiler provides insight into the entire code pipeline that other profiles cannot provide. If you want to profile AJAX, JavaScript, get performance related metrics against industry standards, you have to at least evaluate dynaTrace. The ability to step through the JavaScript and DOM proved invaluable.

The performance issue revolves around IE 7 not being able to process the large amount of DevExpress JavaScript with their controls. It is well documented on the web of the slow performance of JavaScript in IE 7. The three biggest offending DevExpress controls, dynaTrace identified ASPxComboBox, ASPxDateEdit, and ASPxSplitter. A subsequent blog post will follow outlining our scenario, how dynaTrace pinpointed the performance render bottle neck, and the solution.

References

dynaTrace dynaTrace AJAX Edition dynaTrace AJAX Getting Started