Really Big Menu

The menu above contains 790 items organized in 23 submenus. As you can see, the main menu bar is generated instantly, thanks to an optimization technique known as “lazy initialization”.

Note: this feature in DynarchMenu is still experimental. However, our tests look very good, so if your menus are really big then we suggest you to use it.

This technique saves roughly 4 seconds, but there is a cost: the first time a popup menu is visited, it will open slower than usual, because it is generated at that time.

You can chose to setup a menu with lazy initialization by passing “lazy: true” to the config parameter, like this:

DynarchMenu.setup("menu-id", { lazy: true });

If you are curious to see how much it saves, edit this page (“examples/big.html”) and change the <body> to the following:

<body onload="DynarchMenu.setup('menu', { d_profile: true, lazy: true })">
Note: d_profile is an argument used for debugging; if “true” is passed the menu will show a statistics dialog when created, showing how much time was spent and how many (sub)menus and items were generated. If “lazy” is true, the number of menus will always be 1 (the main menu bar).

Refresh several times, then edit the page again and change “lazy: true” to “lazy: false”, so that we disable lazy initialization, then refresh again. In our tests it takes around 4 seconds for the full menu to be generated without “lazy”.