#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2000
    Location
    Minneapolis, MN
    Posts
    48
    Rep Power
    15

    Question Hierarchical Menu's Speed / Load time - JavaScript / DHTML


    I'm currently developing a site, www.55057.com/stolaf/, that has hierarchical menu’s. I am using the code available from http://www.webreference.com/dhtml/. The script works very well, except that it is slow.

    Main WebPage: 33Kb
    Java HM_Array.JS – menu file – currently 9kb, was 14kb (see below)
    Browser determined files: about 30 KB total

    Current Problem: Internet Explorer locks-up / freezes for 3-5 seconds while it ‘compiles’ the menu’s. The Menu’s are created by default on page load. (netscape does not have this problem)

    One way in which I have tried to speed up the load was to try and shrink the size of the HM_Array.JS file, which is what has all of the menu item code.

    One technique I used was to truncate the URL’s. One question is whether or not shrinking the size of the JS file offsets (to 9Kb from 14Kb), the additional time taken to compile the links. Ie:
    http://www.55057.com
    http://www.devshed.com
    becomes:
    h=’http://www.”
    “+h+”55057.com
    “+h+”devshed.com
    *about 50 other links
    So every time the page loads the java interpreter has to add in the http://www. stuff

    Another Option is to compress the Menu’s. Currently there are 4 menu’s. Would condensing these down to one main Menu increase the speed? (So instead of having my GIF images, I would replace it w/ a permanent first level layer/list of options)

    Also, is there any way, or any reason to make JavaScript files into Java? Would this possibly speed up the menu’s?

    Does anyone have any suggestions for other Hierarchical Menu systems? Or should I consider something else like VBScript etc? MSNBC.com has a menu system that Uses ActiveX for IE, but is Java based for Netscape, and it is really fast w/ lots of menu-items (their text document that runs it is 60K!) – Does anyone know where to find code to do something similar to MSNBC?

    Thanks For you your help.
    Dave
    Last edited by dave981; June 16th, 2001 at 04:50 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    Wilmslow, Cheshire
    Posts
    255
    Rep Power
    18
    Just depends on the user's machine, how fast the javascript is processed. I've noticed the same thing with even quite small menus. Unless the menus have to be dynamic then it seems better to write the whole thing out. May be slightly bigger code to download at first, but saves lots of loading time by avoiding script processing.

    Unless you're planning on a massive set of hierarchical menus and constant dynamic changes then all that script processing isn't worth it.

    p.s. You could save some download time by getting rid of a few apostrophes here and there. ("discussion's", "survey's", "menu's" etc)
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2000
    Location
    Minneapolis, MN
    Posts
    48
    Rep Power
    15
    Thanks Dang -

    - I ended up writing a basic perl script so that I could cut down the size of the links in the Menu so that instead of a link being: http://www.devshed.com/ it is now: /u.pl?dev and others like that, since i had over 126 links

    Here's the code for other people, who, if they're like me, spent way too much time looking for a simple script like this:

    #######################
    #!/usr/local/bin/perl

    %engines = (
    "ebay" => "http://www.ebay.com",
    "espn" => "http://www.espn.com/",
    "google" => "http://www.google.com"
    );

    $link=$ENV{'QUERY_STRING'};
    $url=$engines{$link};
    print "Location: $url \n\n";

    exit;

    ######################

    this is as simple as it can get (but I'm a novice Perl programmer, so i'm sure it can be better). There is no error handling, but it doesn't really need it.... But if you have any suggestions, i'll be happy to see them . It took a while to figure out that $ENV{'QUERY_STRING'}; is how you get the input from a url when it isn't submitted by a form...


    Dave


    (keywords: perl url forward truncate link cgi)
    (just to help others find it if they do a search ;-)

IMN logo majestic logo threadwatch logo seochat tools logo