RIA Developer's Journal on Ulitzer

In my previous article 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 selects 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 Analysis of 50, 100 and 500 menu items

Conclusion
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?