2.8 seconds for superfish menu – why?
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.
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:
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:
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?
As a tech geek I was an early adopter of the iPhone. I joke around with my friends that I thought of it before anyone else. Way back in 2005, a few years before the release of the iPhone, I picked up an iPod, and said “One day this thing will be all glass and it will be colour, and we will do email, music and we’ll take photos with … read more
Every day, we help our customers deliver the best experiences and success for their customers. That’s a big part of what digital performance is all about. But that’s not all we do. We take customer success very seriously for our own clients, too. We help them reach and exceed their goals—through our own signature program—the Champion Playbook. For years now, Gainsight has led the way for companies — in many … read more