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