KB Article K18089
Visible to All Users

How to optimize the ASPxMenu control

Description:
From time to time we receive questions (or even complaints) related to the ASPxMenu control's supposedly slow operating speed, or the large size of its rendered result HTML.

Answer:
In this topic, we're going to present some tips that can be used to enhance the ASPxMenu control's performance.
************************************************
1. Minimizing a Menu's HTML Render Size
Note that for usability purposes, the ASPxMenu control, after being placed onto a web form, has some its features enabled by default. These features implement a general menu control behavior expected by most developers. Default realization of these features results in rendering an additional HTML markup, which may not be necessary, in some cases.
The following tips demonstrate how the ASPxMenu's HTML render size can be minimized. The efficiency results of applying these tips are tabulated at the end of this topic (in the Appendix A).
1.1 Disable a menu control's view state
Note that persisting menu view state (that is saving its property values into a web page's hidden field between postbacks) is not always necessary. For example, if the ASPxMenu control is used as a web site's main menu (which usually has a constant structure), saving its view state may not be required. So, the menu's EnableViewState property can be set to false.
1.2 Disable a gutter
By default, gutters are rendered within sub-menus, allowing item images to be displayed, if any are defined.

Since a gutter is rendered within each sub-item, the gutter's resulting HTML code grows in proportion to the number of menu sub-items. If you don't use the menu's gutter functionality (for instance, you don't define images for sub-items, or don't use the checked state of items), you can disable submenu gutters by setting its SubMenuStyle.GutterWidth property to 0px.
1.3 Don't display shadows for submenus
Each submenu within the ASPxMenu control is, by default, displayed with a shadow. Each shadow is rendered using three images – for the shadow's right edge, bottom edge and the right-bottom corner.

If using shadows is not a "must have" feature of your web application, you can set the ShowSubMenuShadow property to false, to avoid rendering of an additional HTML markup.
1.4 Don't use default resource images
The ASPxMenu control may refer to several kinds of service images that by default, are stored in an assembly as resource files. The following kinds of images are initially taken from resources within a menu:
 * Shadow images - These images define a submenu's shadow.
 * Empty images - An empty image is a service strut image used only under IE6 as a substrate layer of item images, if they are defined as .png files. An empty image is a transparent one-pixel GIF image (1x1.gif).
 * Pop-out images (horizontal and vertical) - A pop-out image indicates that a menu item has a submenu (when a menu item contains a submenu, a specific pop-out image can be displayed to indicate that the user can expand the menu by positioning the mouse pointer over the menu item.)

Note that if an image is taken from resources, it's referred to using a long string similar to the one shown below (note that the length of this string is about 160 characters):
src="/ASPxMenu/WebResource.axd?d=Ngc565gJEr6TCZwDPhE2trjhRleqfbSqAbMq7fzLh8bQCV3S2w5x98pyCvUkyB8KLqDQjIwHMpSrBkegPBKjDl7csWbb3H72ktmplevAhvigzY0BXGFUcMI-snTPkAvf0&t=633422297030249010"
Addressing the required service images in such a manner, results in generating superfluous HTML code. In addition, accessing an image from resources takes longer than a static image contained within a web application's folder (especially in debug mode).
To avoid all this, you can switch from taking these images from resources to declaring them as static images placed within a web site's specific folder. So, copy the required shadow, empty and pop-out images (which can be found within the attachment) into a folder within your web application (for instance, "~/Img/"). Then, define the paths to these images within the application's Global.asax file in the following manner:

C#
... <script runat="server"> void Application_Start(object sender, EventArgs e) { DevExpress.Web.ASPxClasses.ASPxWebControl.EmptyImage.Url = "~/Img/1x1.gif"; DevExpress.Web.ASPxClasses.ASPxWebControl.ShadowImage.BottomEdgeUrl = "~/Img/ShadowBottom.png"; DevExpress.Web.ASPxClasses.ASPxWebControl.ShadowImage.RightEdgeUrl = "~/Img/ShadowRight.png"; DevExpress.Web.ASPxClasses.ASPxWebControl.ShadowImage.CornerUrl = "~/Img/ShadowRightBottom.png"; } </script>

Note that pop-out images can be declared more easily by using specific properties of the ASPxMenu control:

ASPx
<dxm:ASPxMenu ... > ... <HorizontalPopOutImage Url="~/Img/mHorizontalPopOut.gif" /> <VerticalPopOutImage Url="~/Img/mVerticalPopOut.gif" /> </dxm:ASPxMenu>

As a result, an image is now referred to using a smaller string:
src="Img/ShadowRightBottom.png"
1.5 Use short menu identifier names
Note that the common manner of minimizing HTML rendering is defining shorter identifier names (IDs) for web controls. It's especially important if a web control serves as a naming container, which can contain child controls (within its template, for instance). In this case, client identifiers of child controls (and its child elements) are composed using the container control's ID, and if this ID is rather long, its repetition within child element IDs may increase the HTML render size dramatically.
So, try to define shorter IDs for web controls that are control containers.

ASPx
<dxm:ASPxMenu ID="m1" ... > </dxm:ASPxMenu>

1.6 Disable rendering IFRAMEs under submenus
An ASPxMenu's render size may also depend upon the RenderIFrameForPopupElements property's setting. This property controls whether a specific underlayer iframe element is rendered below each popup submenu, allowing submenus to be displayed above specific page elements, such as dropdown list editors (in case of IE6 or lower), Flash objects or Java applets.
By default, the RenderIFrameForPopupElements property is set to true only for Internet Explorer versions 6 (or lower). If your web application is intended to be browsed by this browser version, but the described functionality is not required, you can set the RenderIFrameForPopupElements property to false, to reduce the total size of a menu's HTML render.
************************************************
2. Speeding Up a Menu Control
If you want to create the fastest ASPxMenu control, it's recommended that you upgrade to ASPxperience Suite v2008 vol1, since this version contains some menu speed improvements, such as rapid initiating of hovered items, etc. In addition, the following tips may help you to increase the menu's processing speed on the client or server side.
2.1 Disable the menu appearance delay
By default, there is a delay in displaying submenus within a menu control. This duration is controlled by the AppearAfter property. Set this property to 0 to accelerate submenu appearance.
2.2 Don't use animation
Invoking and hiding submenus, within an ASPxMenu control, is by default, performed using a predefined animation effect. You can disable this animation effect by setting the EnableAnimation property to false, in order to increase the menu's overall client performance.
2.3 Use server-side response caching
Typically, if an ASPxMenu control is used as a web site's main menu, it's usually static for a individual web site page. In this case, it's recommended to use the cacheability of a page or user control that contains the menu control, in order to accelerate server-side processing.
A page's cacheability can be defined via server code, or declaratively in the following manner. For example:

C#
protected void Page_Load(object sender, EventArgs e) { Response.Cache.VaryByParams["*"] = true; Response.Cache.VaryByParams.IgnoreParams = false; ... // Make sure that the following option is set, since HTML rendering of // DeveloperExpress web controls may vary for different browsers Response.Cache.VaryByHeaders.UserAgent = true; ... Response.Cache.SetCacheability(HttpCacheability.ServerAndPrivate); Response.Cache.SetExpires(DateTime.Now.AddDays(10)); }
ASPx
<%@ OutputCache Duration="100000" VaryByParam="*" VaryByCustom="browser" %>

You can learn more about caching in the Setting the Cacheability of a Page MSDN topic.
************************************************
APPENDIX A:
Below is a table illustrating how the recommended tips affect the ASPxMenu's render size. The listed results (which are rather approximate and are mostly given for demonstrative purposes) were measured under Internet Explorer 7.0 using the attached sample project.

************************************************
APPENDIX B:
The attached file contains an original ASP.NET web application, which was used to test the efficiency of tips proposed within this topic.
Note that images, which by default are taken from resources, are contained within the applicaton's "Img" folder for your convenience.

Comments (2)

    Hello
    I have a problem with a pop-out image in Menu (HorizontalPopOut), I would change the pop-out image when i use hovers over the item.
    thanks

      Hello,

      I see that you have posted a similar question in the T241438: ASP.NET MVC : problem with a pop-out image (Hover) ticket. We will reply you there.

      Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

      Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.