After reading a recent post by Steve Souders concerning a free tool called dynaTrace Ajax, I was intrigued. It claimed to provide full tracing analysis of Internet Explorer 6-8 (including JavaScript, rendering, and network traffic). Giving it a try I was very impressed. I tested against a few web sites but got the most interesting results running against the JavaScript-heavy Gmail in Internet Explorer 8.
I typically don't write about most performance analysis tools because, frankly, most of them are quite bland and don't provide very interesting information or analysis. dynaTrace provides some information that I've never seen before - in any tool on any browser.
dynaTrace Ajax works by sticking low-level instrumentation into Internet Explorer when it launches, capturing any activity that occurs - and I mean virtually any activity that you can imagine. I noticed very little slow down when running the browser in tracing mode (although it's sometimes hard to tell, considering the browser). However all of the tracing is recorded and saved for later, making it easy to record sessions for later analysis.
Above is the result of a recorded session, logging in to Gmail, reading a mail, and logging back out again. All aspects of the session are saved: Network requests, JavaScript source, all DOM events, etc. I had a hard time finding information that wasn't saved by the tool.
This is the full timeline view of loading a single the Gmail inbox. All network traffic, JavaScript parsing and execution, browser events, and CPU load can be seen.
You can select a segment of the timeline and get a view that looks like the following:
In the above you can see a clearer picture of the exact interactions happening. A phenomenal amount of inline JavaScript execution followed by page layout calculation coinciding with loading of some data over the network. You can mouse over the individual blocks on the timeline to get more information (such as if the JavaScript execute was the result of a timer or what Ajax requests were firing to cause the network traffic). Additionally you can click the blocks to dive in and take a deeper view of the trace.
Digging in to the execution of an XMLHttpRequest on a page we get to see some of the full execution stack trace - and this is where the tools starts to become really interesting. The tool is capable of tracing across JavaScript, through the native XMLHttpRequest, through the network request, and back to the handler that fires when the request is done. This is phenomenal. This is the first tool that I've seen that's capable of tracing through native methods to give you a picture of what activity triggers which actions and the complete ramifications of what happens (in both CPU usage and execution time).
Note that in the stack trace view you can click any piece of code and see its location anywhere inside the source code (and this even works after you've already closed the browser and have moved on - all source code is saved for later analysis).
While it's interesting to trace through code to look for problems the bigger question is usually: Where are slowdowns occurring? This is where the HotPath view comes into play:
This looks like a typical execution count view - like the one that you might see in Internet Explorer's built in tool or in Firebug - except for one important point: This view includes JavaScript parsing and layout rendering times. This is huge! No other tool provides information on how long it takes to parse all the JavaScript code on your site or how long it takes to do all the rendering. Clicking those entries allows you to see a breakdown of every time JavaScript was parsed or a layout was rendered - from which you can trace back to get even more information about what caused those actions. I don't want to seem too excited but I really am, this is just an incredible amount of information - and it gets even better:
Not only can you see the execution count for your defined JavaScript methods but you can also see execution time for the built-in DOM methods! Wondering what native method calls are slowing down your application? Wonder no more. From the HotSpot view you can filter by DOM or regular JavaScript and see exactly where execution time is going and what methods are so slow.
dynaTrace provides an additional view, called PurePath that attempts to figure out problematic scripts:
Just another way to try and get a full picture as to where your application is slowing down and what may be causing the problem.
In all I'm hugely impressed with this (free!) tool and am already using it to do more testing and performance analysis on my code. I don't think any browser has ever had a tool capable of this type of analysis, let alone Internet Explorer 6 and 7, which are still a very real part of any developer's workflow.
I chatted with some of the dynaTrace guys and asked them to add in memory profiling and to support more browsers. If they can provide this quality of instrumentation for CPU and execution time I hope they can do the same for memory usage, the next un-tapped realm of JavaScript performance analysis.
Jonathan (November 17, 2009 at 6:37 pm)
Whoa, that is powerful. Do you think Firebug may incorporate some of these ideas someday?
Gilles Cochez (November 17, 2009 at 6:39 pm)
This tool sure look good, if it goes and support all the major browsers we will finally have one tool that does it all. Changing tools when changing browser can be quite frustrating and time consuming (different interface to learn)
Going to give it a go now, thanks for the introduction to it.
Gilles.
olivvv (November 17, 2009 at 6:43 pm)
"Javascript Memory Validator" does memory profiling. http://www.softwareverify.com/javascript/memory/feature.html
(but not for IE, yet) (and its not free).
Sebastian Werner (November 17, 2009 at 6:49 pm)
Great summary John. Read about this a few weeks ago already but your article clearly highlights why it's worth to get into that tool. Especially as IE is the slowest browser on the market. Optimizing for it might help others, but it really helps IE. And that is what's important.
jn (November 17, 2009 at 6:53 pm)
it would be interesting to see if there is any memory effect from using tools like YUI compressor or the closure compiler.
Will Morgan (November 17, 2009 at 7:06 pm)
After reading this post, never before have I yearned so much to get into work early, download this tool and start profiling my JavaScript application. Really nice find, John.
Allen Pike (November 17, 2009 at 7:42 pm)
As Javascript apps get richer and heavier, and mobile development becomes more important, good Javascript memory analysis tools are truly needed. Would make a worthy Google Summer of Code project, possibly.
Andreas Grabner (November 17, 2009 at 8:26 pm)
Thanks from the dynaTrace Team about this nice post and for pointing out the problem areas that we address with this tool.
There is a nice Step-By-Step Guide on our blog - http://blog.dynatrace.com/2009/11/17/a-step-by-step-guide-to-dynatrace-ajax-edition-available-today-for-public-download/ - for those that are interesting in getting an easy start with the tool.
cheers
Adam Hahn (November 17, 2009 at 8:39 pm)
I believe Webkit Nightlies and Google Chrome Dev builds now have painting and JS parsing times in the Timeline tab of the Inspector: http://googlewebtoolkit.blogspot.com/2009/11/new-insights-into-web-application.html
Can Berkol (November 18, 2009 at 5:20 am)
I didn't know about this. Great share, thanks!
Outsider (November 18, 2009 at 6:40 am)
I'm really impressed. it's wonderful.
Thanks for your recommand.
Daan Mortier (November 18, 2009 at 6:43 am)
This is absolutely exciting. Thanks for sharing, and thanks to the team for all the hard work!
Sachin (November 18, 2009 at 7:53 am)
thanks for sharing..seems very useful.
Ryan Leach (November 18, 2009 at 9:38 am)
Awesome. Another little piece that would add to the joy and the all-in-oneness would be css analysis. Throw in the functionality of CSSUsage and/or dustMe selectors, and then you've really got a full picture with all the tools you'd need to keep even the largest app's codebase wrangled.
Kuroki Kaze (November 18, 2009 at 10:40 am)
Amazing tool. Gotta check some scripts :)
Jonathan Fingland (November 18, 2009 at 11:53 am)
Excellent looking tool. The level of detail provided is simply astounding. Should make identifying the sources of delays a lot easier. Thanks for pointing it out.
I do have to agree with Jonathan (November 17, 2009 at 6:37 pm) that it would be fantastic to see this level of detail in Firebug, though even better would be a consistent cross-browser solution. e.g. one program that can hook into more than one browser.
Steve Souders (November 18, 2009 at 1:24 pm)
Glad I was able to help point the way to this tool. I'll also shine some light on MSFast (http://msfast.myspace.com/) which does memory profiling (but doesn't have all this awesome JS debugging!).
Great job on the part of dynaTrace!
Nosredna (November 18, 2009 at 1:35 pm)
I'm curious. Aside from its obviously great perf features, can this also be used to hunt down bugs in IE scripts?
Markus Gaisbauer (November 18, 2009 at 2:26 pm)
Thanks for all the nice words. I am glad that you like what we built and that hours of debugging IE assembly code finally pay off ;-)
Supporting additional browsers in our tool is of course very desirable. Given the large amount of time it requires to build a good and fast UI for analyzing the collected data, it is less than optimal that every browser has to build their own profiler from scratch. As of today, I think that all major browsers (including IE) are lacking appropriate APIs for building a powerful tool like dynaTrace AE without lots of low-level engineering. I am however confident that browser vendors already see the benefit of powerful performance testing tools and that they will help us out with new APIs in order to add better support for their browser in dynaTrace AE.
Memory profiling will definitely soon become more important, especially with the introduction of client side storage in HTML 5. I am curious, where are the major pain points right now? Memory leaks? Max. memory usage and finding out the memory content at a given time (heap dumps)? GC pauses?
We are always eager to get feedback. Don't hesitate to directly contact us if you found some problem in the current release or if you have concrete ideas on how to make the next release even more useful for building fast web UIs.
Jon Rimmer (November 19, 2009 at 8:49 pm)
My word, this looks absolutely amazing. I can't wait to try this out in work tomorrow. Kudos dynaTrace!
book (November 21, 2009 at 11:57 am)
Hey John, could you update us with the status of your book?
rajakvk (November 22, 2009 at 3:15 pm)
Thanks for sharing John. Until we kill IE6, any tools of this kind is helpful for sure.
Peter Korba (November 26, 2009 at 10:47 am)
This tool seems to be special - normally these tools only work on the surface and not really go that deep. Great work and thanks for this information.
yangg (November 27, 2009 at 3:44 am)
very good!!
TL (November 28, 2009 at 10:53 am)
Thanks for sharing very useful.
Joey (November 30, 2009 at 10:07 pm)
Thanks to Adam Hanh and to Google. This is why i love webkit so much for developping : the webinspector is sooo damn cool and it gets better every day or so ! Unfortunately, there are three browsers that really count so we need a synthetic tool for all the browsers to get sure that optimizing for one doesn't have counter effects for the others. Plus, an online tool would be better beczuse i don't have IE anymore. Yeah i know, but you can make serious development and don't care about IE in some cases... And yep, it's like living in paradise :-)
EastFilters (December 7, 2009 at 6:29 am)
http://www.eastfilters.com
Auto Filters, Replacement Elements For Fuel Filters, Turbine Fuel Filters, Replacement for Fuel Filters, Air Filters, Filter Water Separators, Fuel Purification Systems, Engine Fuel Filters, Gasoline Engine Fuel Filter, Diesel Engine Fuel Filter, Trailer Engine Fuel filter, Engine Fuel filter, Car Filter, auto fuel filters, Truck Fuel Filter and Motor Yacht parts.
simaopig (December 16, 2009 at 2:35 am)
It's so cool thank you.
Mindon (December 30, 2009 at 11:11 am)
I've tried google speed tracer before knowing this good news.
It seems supports for firefox is coming up. :)
metallkat (February 3, 2010 at 5:38 pm)
Very great this looks awesome, respect.
Sunil (February 19, 2010 at 4:48 am)
For Markus Gaisbauer
IMO the major pain point as far as Memory Usage in the Browser is concerned, is to identify the major consumers of memory in a given page. Modern day pages do a lot of fancy stuff, very often involving a lot of data. Such pages will invariably consume a lot of browser memory but this is not due to leaks, it's just inefficient programming. And its not easy to find these memory hoggers and resolve them. A memory profiling tool, especially for Internet Explorer will be just awesome.
Bremer (February 20, 2010 at 11:04 am)
Powerful Toll. I am so interstet in the Firebug Informations.
Yoav Aharoni (February 21, 2010 at 8:31 am)
For those of you interested with firefox/firebug - check out Google Page Speed...
IE Web Admin (March 30, 2010 at 5:03 am)
This is very cool indeed. I am stuck with Companion.js at the moment when I test in IE6 and 7.
John salcome (April 12, 2010 at 7:32 am)
Cool tool, very indepth and complex
Slim (April 21, 2010 at 12:15 pm)
nice tool, very useful, thank a lot!
joboe (April 28, 2010 at 5:20 am)
Hey John,
thanks for the great program! The deep tracking works fine!
SEO (May 5, 2010 at 11:23 pm)
I think it is not easy to find these memory hoggers and resolve them.Thanks.
seo (May 19, 2010 at 1:14 pm)
I'm curious. Aside from its obviously great perf features, can this also be used to hunt down bugs in IE scripts?
Shopmarker (May 31, 2010 at 5:43 pm)
Very cool tool, thanks for sharing.
sk (June 17, 2010 at 2:08 am)
this tool is very cool and provide in depth analysis, im still in the learning process using this tool as im still arent really sure of some parameter which been shown.
really great stuff, keep up the good work
SMS ohne Anmeldung (June 28, 2010 at 1:45 pm)
thanks for the sharing..
Pete (July 6, 2010 at 5:03 pm)
thx for this... i love it!
LaminatCaroline (July 9, 2010 at 3:22 pm)
Thanks a lot! I like!
nlux (July 12, 2010 at 12:38 pm)
Thanks for the valuable information related to dynaTrace Ajax. I didn't know about it. Its really a great tool that provides all the essential information of a website. Awaiting for your next informative post.
Deal Peter (July 17, 2010 at 5:26 pm)
thanks! i like it beacause it is so simple!
GyuSeong, Gyeong (July 19, 2010 at 4:50 am)
Good combination with YSlow!
I wish..
Not only Trident(IE6,7,8) but also Gecko(FF)..
Welsangeln (July 23, 2010 at 2:37 pm)
Great tool, very nice. Thnaks for sharing
Viraj (August 19, 2010 at 7:10 am)
Very nice tool having lot of functionalities,analysing capabilities. I like !
Magdalena (August 29, 2010 at 3:54 pm)
This is a great analytics tool! I like it. Thanks for sharing.