Andreas Grabner About the Author

Andreas Grabner has been helping companies improve their application performance for 15+ years. He is a regular contributor within Web Performance and DevOps communities and a prolific speaker at user groups and conferences around the world. Reach him at @grabnerandi

Performance Analysis of dynamic JavaScript Menus

In my previous post I talked about the impact of jQuery Selectors on a page that I analyzed. The page took 4.8 seconds in the onLoad event handler. 2 seconds were mainly caused by the selectors as described in the blog. The other 2.8 seconds were caused by a dynamic JavaScript menu – in that particular case it was the superfish jQuery plugin. A closer analysis showed why it takes so long and this also got me to do some research on these menus. Kudos to Joel Birch for his excellent plugin – easy to integrate – and – if properly used – its fast enough :-)

2.8 seconds for superfish menu – why?

The following image shows the PurePath for the onLoad event handler captured by dynaTrace AJAX Edition. It also shows the JavaScript source code that selectes the “.nav” element and invokes the superfish method on this object. As a result we see the superfish method iterating through each anchor tag (544 on that web page) performing the necessary DOM manipulation on each element to transform the list elements and anchors in a dynamic menu:

dynaTrace AJAX PurePath showing superfish execution on a 544 element menu

For each anchor tag – superfish performs some actions. As you can see from the code-snippet of the for-each function – the $a.eq(i) could be replaced with a $(this). This alone would save about 20% of performance.

The real problem here however is not necessarily the superfish implementation. It is a huge menu structure with 544 menu items. I am not sure how many web pages exists that use very large menus like this – but I am sure there are. The problem with the approach on this web page is that the page is unresponsive for several seconds giving the end-user a bad end-user experience. Delay loading the JavaScript – using timers to not block the browser – smaller menus – … – all these are probably valid options to speed up this page. Any additional suggestions out there?

Performance Analysis of different Menu Sizes

Based on this superfish example I created a sample page with 3 different sized menus: 50 elements, 100 elements and 500 elements. The page has 3 buttons – each triggers the menu creation and makes the correct menu visible. Here is an example for the small menu:

Sample Page with a small dynamic Menu

Analyzing the execution times it takes for each menu size shows me that the superfish menu scales really well – it is just that you have to be careful with the number of elements. Here are the results for 50, 100 and 500 menu items:

Performance Anlysis of 50, 100 and 500 menu items

Conlusion

DOM Manipulations are expensive. The more elements you have to manipulate the more overhead you will see. Dynamic menus are a great way to make your website more interactive and nicer to navigate through – but keep in mind the cost of every menu item. This is just one example of a dynamic menu library – there are tons of other implementations out there. Any feedback in terms of performance or best practices on this or other libraries?

Comments

  1. A better approach to this type of menu is to put the event handler on the UL and let the event from each LI/A bubble up. This gives you *one* event handler for X items

  2. can you tell me the addon/software you used to analyze?

  3. Hi – I used the dynaTrace AJAX Edition (http://ajax.dynatrace.com) – it is FREE and works for IE6, 7 and 8.

  4. I wanted to get a copy of the dynamic menu to play with but the link seems broken. is it available?

  5. @abbmp3: the link works for me – please try it again – or – just simply google for “superfish jQuery plugin”

  6. Thanks for the information you share!Nice blog 2.

    http://pokercalculator-free.com

  7. Could you tell me the software you used to analyze? Thank you!

Trackbacks

  1. Performance Analysis of dynamic JavaScript Menus…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. [...] View original post here: Performance Analysis of dynamic JavaScript Menus Performance … [...]

  3. Social comments and analytics for this post…

    This post was mentioned on Twitter by dynaTrace: Performance Analysis of dynamic JavaScript Menus: In my previous post I talked about the impact of jQuery Selec.. http://bit.ly/08ffIjT

  4. [...] This post was mentioned on Twitter by dynaTrace software, Tomaž Muraus. Tomaž Muraus said: Performance Analysis of dynamic JavaScript Menus http://bit.ly/5HDeHn #javascript #superfish #dynatrace #jquery [...]

  5. [...] There probably are libraries like there are stars in the sky. Most of them are free to download and therefore very attractive to include in web sites as they solve many problems of developers, e.g.: creating a fancy dynamic popup menu. Before using a library, however, a developer must get familiar with the internals of the library. These libraries are often implemented to solve a certain use case for a particular web site. Even though it looks like a library also solves your particular problem developers need to test them out in their specific environment. The following blog post for instance shows how a dynamic menu library works great on small menus but how performance suffers once menu sizes grow: Performance Analysis of JavaScript Menus [...]

  6. [...] I guess I don’t need to talk about the importance of JavaScript in modern web applications. As great and important as JavaScript and AJAX are you have to make sure to use it efficiently because JavaScript execution adds to the overall end-user experience. I already blogged about different best practices on things like correct usage of CSS Selectors with jQuery and Prototype and showed the performance impact of bad JavaScript code and incorrect jQuery usage by analyzing sites like vancouver2010.com or analyzing internals of JavaScript menus. [...]

  7. [...] use Superfish, a jQuery Plugin, for our dynamic JavaScript menus. As described in my blog post on the performance impact of dynamic JavaScript menus we also ran into minor performance problems with larger menu structures. It was nothing severe but [...]

  8. [...] The Third Impression is when the web site actually becomes interactive for the user (Time To Interactivity). Heavy JavaScript execution that manipulates the DOM causes the web page to become non interactive for the end user. This can very often be seen when expensive CSS Selector Lookups (check out the blogs about jQuery and Prototype CSS Selector Performance) are used or when using dynamic elements like JavaScript Menus (check out the blog about dynamice JavaScript menus). [...]

Comments

*


+ 2 = eleven