Performance Problems With Many Menus

dmcquade · Post by **dmcquade** » Mon Nov 27, 2006 3:03 am

Hey everyone,

I have a page that loads a drop-down menu for each record returned. However, I'm seeing a lot of performance problems as the number of records increase. When I get more than 30 or so menus on a single page, the page has a lot of problems with delayed loading and scrolling.

My menus are generated dynamically based on the data returned and there are three possible menu sets.

Has anyone been able to load a large number of menus on a single page without any performance problems? Any comments / suggestions are appreciated.

DJ McQuade

Post by **John** » Mon Nov 27, 2006 3:22 pm

We'll need a URL to see how you have things set up.

dmcquade · Post by **dmcquade** » Mon Nov 27, 2006 6:01 pm

I create an account for testing purposes:

Username: test@mywineassistant.com
Password: testing

One you logon, you will be in the My Cellar screen. There is an "Action" link next to each wine. When you put the mouse over this link, the menu will appear.

By default the page shows 25 wines, but as the number of wines increases, the page performance decreases. You can see this by changing the "Bottles Per Page" preference at the top to ALL and press Submit.

Below is my code:

My Cellar Page

This page simply chooses a menu set based on the status of a wine. There are three menu sets that can be selected.

<%
if rs("STATUS") = "NOT CONSUMED" then
if rs("BOTTLE_STATE") = "Shipping" or rs("BOTTLE_STATE") = "Future" then
%>

<tr>
<td nowrap align="left" valign="top" bgcolor="<% = vBGColor %>">
<script type="text/javascript" src="mm_my_cellar_full_menu_data.asp?gsearch=<% = vGoogleSearchURL %>&wvid=<% = rs("WINE_VINTAGE_ID") %>&bottle_id=<% = rs("BOTTLE_ID") %>"></script>
<a href="#" name=mmenu<% = rs("BOTTLE_ID") %> id=mmenu<% = rs("BOTTLE_ID") %> onmouseover="popup('WinePopupFullListNotReceived<% = rs("BOTTLE_ID") %>','mmenu<% = rs("BOTTLE_ID") %>')" onmouseout=popdown()><font size="1">
Action</font></a> </td>
<%
else
%>
<tr>
<td nowrap align="left" valign="top" bgcolor="<% = vBGColor %>">
<script type="text/javascript" src="mm_my_cellar_full_menu_data.asp?gsearch=<% = vGoogleSearchURL %>&wvid=<% = rs("WINE_VINTAGE_ID") %>&bottle_id=<% = rs("BOTTLE_ID") %>"></script>
<a href="#" name=mmenu<% = rs("BOTTLE_ID") %> id=mmenu<% = rs("BOTTLE_ID") %> onmouseover="popup('WinePopupFullList<% = rs("BOTTLE_ID") %>','mmenu<% = rs("BOTTLE_ID") %>')" onmouseout=popdown()><font size="1">
Action</font></a> </td>
<%
end if
else
%>
<tr>
<td nowrap align="left" valign="top" bgcolor="<% = vBGColor %>">
<script type="text/javascript" src="mm_my_cellar_full_menu_data.asp?gsearch=<% = vGoogleSearchURL %>&wvid=<% = rs("WINE_VINTAGE_ID") %>&bottle_id=<% = rs("BOTTLE_ID") %>"></script>
<a href="#" name=mmenu<% = rs("BOTTLE_ID") %> id=mmenu<% = rs("BOTTLE_ID") %> onmouseover="popup('WinePopupFullListConsumed<% = rs("BOTTLE_ID") %>','mmenu<% = rs("BOTTLE_ID") %>')" onmouseout=popdown()><font size="1">
Action</font></a> </td>
<%
end if
%>

Menu Data

Below you can see the menu data for the three different menus.

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-2;

with(menuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.1)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}

with(milonic=new menuname("WinePopupFullList<% = Request.Querystring("bottle_id") %>")){
style=menuStyle;
aI("text=Edit;url=edit_wine.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Move Bottle;url=move_wine_select_rack.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Add Same;url=add_wine_step_3.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Delete;url=my_cellar.asp?action=delete&bottle_id=<% = Request.Querystring("bottle_id") %>&wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Ratings / Info;url=wine_info.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Google;url=<% = Request.Querystring("gsearch") %>;target=_new;");
aI("text=Wine Labels;url=upload_wine_label.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Consume;url=consume.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Consume & Review;url=consume_and_review.asp?bottle_id=<% = Request.Querystring("bottle_id") %>&wvid=<% = Request.Querystring("wvid") %>&review_id=0;");
}

with(milonic=new menuname("WinePopupFullListConsumed<% = Request.Querystring("bottle_id") %>")){
style=menuStyle;
aI("text=Edit;url=edit_wine.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Move Bottle;url=move_wine_select_rack.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Add Same;url=add_wine_step_3.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Delete;url=my_cellar.asp?action=delete&bottle_id=<% = Request.Querystring("bottle_id") %>&wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Ratings / Info;url=wine_info.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Google;url=<% = Request.Querystring("gsearch") %>;target=_new;");
aI("text=Wine Labels;url=upload_wine_label.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Undo Drink;url=my_cellar.asp?action=undo_drink&bottle_id=<% = Request.Querystring("bottle_id") %>;");
}

with(milonic=new menuname("WinePopupFullListNotReceived<% = Request.Querystring("bottle_id") %>")){
style=menuStyle;
aI("text=Edit;url=edit_wine.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Move Bottle;url=move_wine_select_rack.asp?bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Add Same;url=add_wine_step_3.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Delete;url=my_cellar.asp?action=delete&bottle_id=<% = Request.Querystring("bottle_id") %>&wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Ratings / Info;url=wine_info.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Google;url=<% = Request.Querystring("gsearch") %>;target=_new;");
aI("text=Wine Labels;url=upload_wine_label.asp?wvid=<% = Request.Querystring("wvid") %>;");
aI("text=Mark Received;url=my_cellar.asp?action=markreceived&place=no&bottle_shock=no&bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Mark Received w/Bottle Shock;url=my_cellar.asp?action=markreceived&place=no&bottle_shock=yes&bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Mark Received & Place;url=my_cellar.asp?action=markreceived&place=yes&bottle_shock=no&bottle_id=<% = Request.Querystring("bottle_id") %>;");
aI("text=Mark Received & Place w/Bottle Shock;url=my_cellar.asp?action=markreceived&place=yes&bottle_shock=yes&bottle_id=<% = Request.Querystring("bottle_id") %>;");
}

drawMenus();

dmcquade · Post by **dmcquade** » Mon Nov 27, 2006 6:03 pm

By the way, I tried remove the menu code and the page performs a lot better ... so I'm pretty sure that's the issue here.

DJ

Post by **John** » Mon Nov 27, 2006 11:10 pm

Your setup is incorrect for placing the menu in a table. Please see http://milonic.com/tablemenu.php.

dmcquade · Post by **dmcquade** » Tue Nov 28, 2006 5:01 pm

So the menus within tables are causing the performance problems? I re-coded this based on what I found on the page you noted but I'm still seeing a lot of performance problems. I'm not quite sure what I was doing wrong before, but the new code builds the menu in the main page instead of referring to the menu file. The output looks like this:

<td nowrap align="left" valign="top" bgcolor="#F0F0F0">

<SCRIPT TYPE="text/javascript">

with(main=new menuname("submenu160")){
style=menuStyle;
aI("text=Edit;url=edit_wine.asp?bottle_id=160;");
aI("text=Move Bottle;url=move_wine_select_rack.asp?bottle_id=160;");
aI("text=Add Same;url=add_wine_step_3.asp?wvid=384;");
aI("text=Delete;url=my_cellar.asp?action=delete&bottle_id=160&wvid=384;");
aI("text=Ratings / Info;url=wine_info.asp?wvid=384;");
aI("text=Google;url=www.google.com;target=_new;");
aI("text=Wine Labels;url=upload_wine_label.asp?wvid=384;");
aI("text=Consume;url=consume.asp?bottle_id=160;");
aI("text=Consume & Review;url=consume_and_review.asp?bottle_id=160&wvid=384&review_id=0;");
}

with(new menuname("Main Menu160")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=item1;url=#");
aI("text=Action;showmenu=submenu160;");
}
drawMenus();
</SCRIPT>

</td>

The new ASP code looks like this:

<tr>
<td nowrap align="left" valign="top" bgcolor="<% = vBGColor %>">

<%
if rs("STATUS") = "NOT CONSUMED" then
if rs("BOTTLE_STATE") = "Shipping" or rs("BOTTLE_STATE") = "Future" then
%>

<SCRIPT TYPE="text/javascript">
with(new menuname("Main Menu<% = rs("BOTTLE_ID") %>")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=item1;url=#");
aI("text=item2;showmenu=submenu1;");
aI("text=item3;url=#");
aI("text=item4;url=#");
}
drawMenus();
</SCRIPT>
<%
else
%>

<SCRIPT TYPE="text/javascript">

with(main=new menuname("submenu<% = rs("BOTTLE_ID") %>")){
style=menuStyle;
aI("text=Edit;url=edit_wine.asp?bottle_id=<% = rs("BOTTLE_ID") %>;");
aI("text=Move Bottle;url=move_wine_select_rack.asp?bottle_id=<% = rs("BOTTLE_ID") %>;");
aI("text=Add Same;url=add_wine_step_3.asp?wvid=<% = rs("WINE_VINTAGE_ID") %>;");
aI("text=Delete;url=my_cellar.asp?action=delete&bottle_id=<% = rs("BOTTLE_ID") %>&wvid=<% = rs("WINE_VINTAGE_ID") %>;");
aI("text=Ratings / Info;url=wine_info.asp?wvid=<% = rs("WINE_VINTAGE_ID") %>;");
aI("text=Google;url=www.google.com;target=_new;");
aI("text=Wine Labels;url=upload_wine_label.asp?wvid=<% = rs("WINE_VINTAGE_ID") %>;");
aI("text=Consume;url=consume.asp?bottle_id=<% = rs("BOTTLE_ID") %>;");
aI("text=Consume & Review;url=consume_and_review.asp?bottle_id=<% = rs("BOTTLE_ID") %>&wvid=<% = rs("WINE_VINTAGE_ID") %>&review_id=0;");
}

with(new menuname("Main Menu<% = rs("BOTTLE_ID") %>")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=item1;url=#");
aI("text=Action;showmenu=submenu<% = rs("BOTTLE_ID") %>;");
}
drawMenus();
</SCRIPT>

<%
end if
else
%>

<SCRIPT TYPE="text/javascript">
with(new menuname("Main Menu<% = rs("BOTTLE_ID") %>")){
style=menuStyle;
alwaysvisible=1;
position="relative";
aI("text=item1;url=#");
aI("text=item2;showmenu=submenu1;");
aI("text=item3;url=#");
aI("text=item4;url=#");
}
drawMenus();
</SCRIPT>

<%
end if
%>
</td>

dmcquade · Post by **dmcquade** » Tue Nov 28, 2006 5:12 pm

Sorry, forgot to mention. If you want to see the new code then you'll have to go to our development site. You can use the same username / password as above ...

http://www.mywineassistant.com/mwa150

dmcquade · Post by **dmcquade** » Wed Nov 29, 2006 3:36 pm

Any help on this would be really appreciated. I have a code release due in the near future and this is a very important part of my application.

Thanks everyone!

DJ

Post by **Andy** » Sun Dec 03, 2006 1:03 pm

Hi,

You actually have 26 menus and 254 menu items - This in itself is not a lot but will have an impact on performance.

What I suggest is only use 1 menu and 9 items as the menus are effectively the same but with different links. With a little javascript, you can dynamically change the links based on certain criteria, this will definitely speed things up and make your site much more efficient.

Let me know if you need help with this

Cheers,
Andy

dmcquade · Post by **dmcquade** » Sun Dec 03, 2006 7:21 pm

Andy,

I may need a little help with this since I'm not too familar with Java Script. If you can help me with passing variables / values back to a single menu, I would really appreciate it.

DJ

dmcquade · Post by **dmcquade** » Mon Dec 04, 2006 7:54 pm

If someone can give me a hand, I would be more than happy to pay a consulting fee. I just need a simple example of how to dynamically change the Java based on data received from a database. I think if I can get my calls down to 3 individual menu items (as opposed to one for each record returned) then I should be good to go.

DJ

dmcquade · Post by **dmcquade** » Mon Dec 11, 2006 6:18 am

Is there anyone available who can show me how I can do the above? I would really like to use the menu system for my site, but I can't figure out how to get it to work on a large number of items. This dynamic java stuff sounds promising, but I don't have a clue how to get it to go.

Thanks,

DJ