help. extremely large menus take too long to load

Poster: tmakaro
Dated: Thursday January 26 2006 - 21:54:55 GMT

Believe it or not I have about 2000 menu options. I store these options in a js file which I include so they are cached on the clients machine. Even so it takes the browser about 4 or 5 seconds to go through the js file. I timed it using an alert before and after the js include and I also checked the browser cache to make sure a new js file was not being loaded.

This is unacceptable overhead to have going between web pages so I am looking for another solution.

Does anyone have any ideas?
Troy

Poster: vikenk
Dated: Thursday January 26 2006 - 23:30:47 GMT

How about a URL?

Are you saying that it takes too long for the menu to appear, or does it take too long for the menu to unfold and show all the items?

The menu items are built on mouseover. There is a global option to build the menu upon inital load. Use this:


I'm not sure if this is the exact proper use. Maybe Ruth or Kevin3442 will be able to clarify more.

It's better to see the site, though. Hope this Helps.

Viken K.

Poster: tmakaro
Dated: Friday January 27 2006 - 0:02:04 GMT

Sorry I have no permanent url for you to try. Here is my include with the alert before and after:

<script language="JavaScript">
alert("got here0");
</script>
<script type="text/javascript" src="/nightly/menudata.js"></script>
<script language="JavaScript">
alert("got here1");
</script>

And here is a snippet of what is in menudata.js:

with( menu = new menuname( "tscmenu9" ) ) {
overflow="scroll";
style=subMenuStyle;

aI( "text=Employee Reports;status=Employee Reports;windowTarget=Broker?env=ads&template=prm.Construction.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Manager Reports;status=Manager Reports;windowTarget=Broker?env=ads&template=prm.Construction.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
}

with( menu = new menuname( "tscmenu10" ) ) {
overflow="scroll";
style=subMenuStyle;

aI( "text=Staffing Notification Processing;status=Staffing Notification Processing;windowTarget=Broker?env=prm&portal=popup&template=prm.transactionMaintenance.xml;windowType=popup;windowWidth=800;windowHeight=600;" )
aI( "text=HR Report Writer;status=HR Report Writer;windowTarget=Broker?env=prm&template=prm.PRMReportWriterMenu.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=HR Report Viewer;status=HR Report Viewer;windowTarget=Broker?env=prm&template=prm.PRMReportWriterMenu1.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=File Upload;status=File Upload;windowTarget=Broker?env=prm&template=prm.FileUploadMenu.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Login Info;status=Login Info;windowTarget=Broker?env=prm&template=prm.LoginInfo.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=WorkflowGen;status=WorkflowGen;windowTarget=Broker?env=prm&template=prm.WorkflowGenPortal.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Leave Changes;status=Leave Changes;windowTarget=Broker?env=prm&template=glb.te/te.xml&product=prm&id=11;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Profile Maintenance;status=Profile Maintenance;windowTarget=Broker?env=prm&template=prm.ProfileMaintenance.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Location Map;status=Location Map;windowTarget=Broker?env=prm&template=prm.Map1.xml;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=Employee Information;status=Employee Information;showmenu=tscmenu11;" )
aI( "text=System Maintanence;status=System Maintanence;showmenu=tscmenu29;" )
aI( "text=Substitute/Casual Dispatch Menu;status=Substitute/Casual Dispatch Menu;showmenu=tscmenu95;" )
aI( "text=Competition and Posting Menu;status=Competition and Posting Menu;showmenu=tscmenu118;" )
aI( "text=Staffing Notification System Menu;status=Staffing Notification System Menu;showmenu=tscmenu124;" )
aI( "text=Assignment Tracking Menu;status=Assignment Tracking Menu;showmenu=tscmenu125;" )
aI( "text=Absence System;status=Absence System;showmenu=tscmenu133;" )
aI( "text=Evaluations and Discipline;status=Evaluations and Discipline;showmenu=tscmenu148;" )
aI( "text=Grievance Tracking Menu;status=Grievance Tracking Menu;showmenu=tscmenu151;" )
aI( "text=Benefits Tracking System;status=Benefits Tracking System;showmenu=tscmenu152;" )
aI( "text=Employee Training and Certification;status=Employee Training and Certification;showmenu=tscmenu159;" )
aI( "text=Leave Management Menu;status=Leave Management Menu;showmenu=tscmenu164;" )
aI( "text=Seniority System Menu;status=Seniority System Menu;showmenu=tscmenu166;" )
aI( "text=DDay Test;status=DDay Test;windowTarget=Broker?env=prm&template=glb.te/te.xml&product=prm&id=1770;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
aI( "text=SC Maintenance;status=SC Maintenance;showmenu=tscmenu172;" )
aI( "text=mySQL Batch File Creation;status=mySQL Batch File Creation;windowTarget=Broker?env=prm&template=glb.te/te.xml&product=prm&id=1784;windowType=thisBrowser;windowWidth=800;windowHeight=600;" )
}

with( menu = new menuname( "tscmenu11" ) ) {
overflow="scroll";
style=subMenuStyle;

aI( "text=Employee Demographics;status=Employee Demographics;showmenu=tscmenu12;" )
aI( "text=Contract System Menu;status=Contract System Menu;showmenu=tscmenu14;" )
aI( "text=Quick Entry Screen Menu;status=Quick Entry Screen Menu;showmenu=tscmenu15;" )
aI( "text=Employee Termination Menu;status=Employee Termination Menu;showmenu=tscmenu16;" )
aI( "text=Employee Transfer Request Menu;status=Employee Transfer Request Menu;showmenu=tscmenu17;" )
aI( "text=Dependent Information Menu;status=Dependent Information Menu;showmenu=tscmenu18;" )
aI( "text=Emergency Notification;status=Emergency Notification;showmenu=tscmenu19;" )
aI( "text=Critical Date Menu;status=Critical Date Menu;showmenu=tscmenu20;" )
aI( "text=Hire Information Menu;status=Hire Information Menu;showmenu=tscmenu21;" )
aI( "text=General Employee Reporting;status=General Employee Reporting;showmenu=tscmenu22;" )
aI( "text=Government Reporting;status=Government Reporting;showmenu=tscmenu23;" )
aI( "text=Employee Preferences Menu;status=Employee Preferences Menu;showmenu=tscmenu27;" )
aI( "text=Employee Experience Menu;status=Employee Experience Menu;showmenu=tscmenu28;" )
}

There are 2000 of them in there!

Poster: Ruth
Dated: Friday January 27 2006 - 0:04:06 GMT

Hi,

Vikenk is correct, a site is better so we can actually see what's going on. As to buildAllMenus, the default action of the menu is to only build them when they are opened. BuildAllMenus=true allows that to be changed so they are built at runtime, but this will reduce the performance of the menu. So, it's a trade off, reduce performance but at the same time reduce any additional processing.

Just as an aside, I have to shake my head, because I'm on dial up and 4 seconds seems pretty fast to me.

Ruth

Poster: tmakaro
Dated: Friday January 27 2006 - 0:29:03 GMT

ok, I was able to find some space to post an example. It doesn't do much, just an alert before and after the js include. The first time takes about 16 seconds while the second time takes about 4 seconds since its cached.

https://internal.tscsoftware.com/public ... /test.html

Poster: vikenk
Dated: Friday January 27 2006 - 14:44:43 GMT

Hello,

I'm not sure what you are trying to do with this code. WhenI click on the link I see a blank page, then I get a box that says "got here A" and then another box that says "got here B". No Menu.

My guess as to the reason that its slow is just the mere size of it. It just takes time to build hundreds of menu items. If I were to use an analogy it would be: The bigger the fish tank, the longer it takes to fill it up. (It's a lame analogy, I know. But, hey, it's all I could think of).

Viken K.

Poster: tmakaro
Dated: Friday January 27 2006 - 14:52:47 GMT

Is there any way to load the submenus from the server one at a time as they are selected from the user?

Poster: vikenk
Dated: Friday January 27 2006 - 14:57:13 GMT



That, I'm not sure about. It's beyond my knowledge of the menu. Maybe one of the moderators or Andy himself can answer that.

Sorry :>(

Viken K.

Poster: Ruth
Dated: Friday January 27 2006 - 15:40:17 GMT

Hi,

Sorry, this is beyond my knowledge, also. But, thinking about how it works I can't picture how you'd do that since the main menu has a 'showmenu' in it and the program would be looking for that information when it loads, even if there is no mouseover of the item, it still would be reading the main menu and looking for the other menus' information. Of course, since I don't know about this stuff, this is speculation, but it would seem that even if you split off the submenus into their own files, they would load when the page loads.

There is a compression tool. Note, I tried to compress your file and it is so large the tool times out. To use it you will need to split the file into two so each is small enough. I tried that and it did work. I copied 1/2 of the file to a blank doc, saved it as data1.js and copied the other half and saved it as data2.js. Then I used the tool on data1.js, when it finished I highlighted, copied and pasted the result to a new blank doc, then I did the data2.js and copied and pasted the result right after the first one in the new doc.

It only cuts off about 16kb so it may not be worth it.

http://www.milonic.com/jscompactor.php

I'll see if I can find any information on your other question.

Ruth

Poster: tmakaro
Dated: Friday January 27 2006 - 22:31:15 GMT

ok, i'm working with the concept of using frames with frame1(blue) loading the data and frame2(red) displaying the data. The logic is there in the red page to wait for the blue page to be loaded before drawing the menus.

So is it even possible to draw the menu on the red page?

Here is my example: Note it currently displays the menu on the blue page and there is logic to display the menu on the redpage (the drawit() function) but it doesn't work. I imagine there are some variables that I have to copy over but I am not sure what to copy.

https://internal.tscsoftware.com/public ... Frame.html

Poster: Ruth
Dated: Saturday January 28 2006 - 2:46:19 GMT

Hi,

I'm not sure what you are trying to do. There is a frames version that you can use if you want frames and to have the main menu in one frame and the submenus open in another.

But, even with frames you have the same data file as to the submenus and that file is still the same size and will take just as long to load as it does without frames. It's not the program that is taking the time, it's the data file with all that information which is 441kb in size.

I can think of one way to do it, since you mentioned frames. If you can use frames or iframes this would be the best way I can think to do it.

Make a frameset with a top frame that holds the main menu and a bottom larger frame that will hold the content.

Make the main menu a menu with link items instead of showmenu, so for example, the first item would have something like this



Then when they click that link whateverthepage would load in the content frame and it would have it's own little main menu with the call for the MyInfo submenus.


You would need a page for each of the main menu items, 5 of them. Then on each page you'd put the call for the particular 'main' menu that would go with that page and all its submenus, you could put all that info in one data file, instead of having a main and sub data file. To do this you would split the large data file you have now into 6, i.e.

main_data.js -the one with just the main menu as links that will be in the top frame.

myinfo_data.js - this would have a main menu that only has one text item in it, MyInfo, with a showmenu to show the tscmenu1. This data file would have that myinfo menu, this is a new menu you make that will be a 'main' menu, set up to be alwaysvisible, and all the submenus that go with that particular item.

And so on for the 5 items you have listed. I hope that made sense.

If you don't understand what I mean, I can make a small example for you. You could do this with frames, or you could use an iframe if your browsers support iframes.

That's the only way I can think to do this, and although you'll be using frames, you will get away from having to have the special frames menu and coding, and you can end up with smaller data files to load since only the file that corresponds with the particular page is loading, and at the same time you still have the top main menu with the links to the 5 pages.

Ruth