1. How long is "long"?

2. That sounds like a maintenance nightmare. Cramming all of that into JavaScript in an effort to save 60kb? I don't know if I would have found much value in that effort. Also, what sort of performance hit are you taking by running this through the JavaScript engine first? You might be saving a tiny amount of space on one end, but when you add the processing time (and extra memory required to store the HTML in a JavaScript variable), plus the utter complexity of trying to modify it and keep it in sync with whatever non-JavaScript solution you're using... is it really worth it?

I'm not trying to discourage you, I'm just wondering if that approach is a good long term strategy.

In any case, have you used any of the Chrome developer tools to try and debug what is happening?

It isn't a maintenance nightmare because the whole thing is generated via PHP on the fly. I have a master text CSV file that holds the linking instructions for the main menu items. This master file generates all the menus on my site not just the JS menu. I update that one CSV file and everything is updated.

The PHP code also automatically pulls in my RSS feed from my blog which is on a sub-domain and separate server so that the latest blog entries get automatically added to the menu. I use a caching mechanism to cache my blog RSS feed on the main server to eliminate the latency of making a request to a different server.

The same master JS file gets used by my main site, sub-domains and partner branded sites so that they all always have the same top menu and all I have to do is update a single CSV file to pull it off.

This master JS file also does more than generate the top menu, it handles my other common JS functions as well. All told the transfer requirement (headers etc.) for that file is just over 13kb in size gzipped. When I had the top menu JS code separate from my other JS code the combined download requirement was about 17kb so it is really nothing as far as download goes.

This master JS file is set to be cached by the browser and cache engines for 24 hours, which is longer than most of user sessions, but is short enough to make sure the top menu doesn't get stale.

All told based on Opera and Chrome's developer tools network speed notes, it takes me around 200ms for those browsers to request and then receive the JS file in question. As a comparison a typical 1kb image from my server takes about me 80ms from request to delivery. I also usually have a ping latency to my server of around 40ms.

To download the main HTML, the CSS and master JS file then render past the main menu takes less than one second according to both Chrome and Opera. IE7 is also pretty good with rendering to this point.

The reason the menu doesn't slow down rendering is that only the parent menu bar needs to get rendered. The drop down menus don't render until the mouse hovers over the parent menu item.

The biggest lag I see in rendering happens when the ad code scripts start to fire but I've structured the layout of my pages such that all of this fires after the main content is rendered. As such users have full access to content about 1/3 of the way through a page loading.

What would really help is if my ad providers cleaned up their HTML, CSS and JS as well as used shorter cookie strings. I could probably knock off over 1sec of download/rendering if their code was minified.

Is the code worth it? Yes I think it is. Here's why:

1) Using a separate JS file allows me maintain a single unified menuing system for users across multiple "sites", which provide for consistent navigation.

2) A separate CSV file and automatically pulling RSS feeds keeps maintenance very simple.

3) By using a separate JS file I'm able to update the top menu on the partner branded sections of my site, which are housed on partner servers, without having to submit a template change request.

4) Having the menu in a separate file allows the menu to be cached for the duration of a session thus eliminating a significant amount of page bloat, which allows pages to render extremely fast on multiple page visits by users.

5) By having a robust menuing system at the top of every page I'm able to get users to visit more pages on my sites. The more interesting stuff users find on my site, the more likely it is that they will return and tell others about my site.

6) By having the menu in a JS file that is blocked to robots by my robots.txt file the menu doesn't create the appearance of a link flood on my site. These links after all are intended for users not bots.

1. How long is "long"?

On my computer, which is old and pretty slow (WinXP Pro SP3 running on a 1.8gHz Intel Pentium M processor and 1gb of RAM), the top menu function took 3ms (3/1000 of a second) to parse. So I'd say that scripting wise it has zero impact on page rendering.

To be clear if my full menu was turned into a string in a single variable before being returned it would fail. When it is concatenated into two different master variables and then those two variables are concatenated together on the return command it works just fine.

This would fail:

var m1="1st half of menu";
var m2="2nd half of menu";
var a=m1+m2;
return a;

This would work:

var m1="1st half of menu";
var m2="2nd half of menu";
return m1+m2;

It took me quite a bit of testing and digging to discover this. I wasn't getting any errors and I just couldn't find any bad code. I started commenting out sections of the PHP code that generated the menu to try and isolate out the problematic code. After isolating out what I thought was the bad code and not finding anything. I decided to enable that section of code and disable a different section to see what happened. This is when I discovered the code wasn't bad but that Chrome was choking on the master variable's string size.

My hope is that by starting this thread I'll save someone else some major frustration. I know that Webmaster World threads showing up in Google SERPs have saved me considerable frustration on more than one occasion.

<html>
<head>
<title>Variable limit test</title>
</head>
<body>
<div id='N'></div>
<script type="text/javascript">
var ONE, TEN, HUNDRED, THOUSAND, TENTHOUSAND;
function timesTen(v) {
  var i, s = '';
  for (i = 0; i < 10; i++) {
    s += v;
  }
  return s;
}
ONE = 'A';
TEN = timesTen(ONE);
HUNDRED = timesTen(TEN);
THOUSAND = timesTen(HUNDRED);
TENTHOUSAND = timesTen(THOUSAND);
document.write("<li>ONE.length = " + ONE.length + "<\/li>");
document.write("<li>TEN.length = " + TEN.length + "<\/li>");
document.write("<li>HUNDRED.length = " + HUNDRED.length + "<\/li>");
document.write("<li>THOUSAND.length = " + THOUSAND.length + "<\/li>");
document.write("<li>TENTHOUSAND.length = " + TENTHOUSAND.length + "<\/li>");
var i, str = '';
for (i = 0; i < 100000; i++) {
  str += TENTHOUSAND;
}
document.write("<li>str.length = " + str.length + "<\/li>");
</script>
</body>
</html>

var a='bla'+b+c+'bla bla'+e+jF(1000)+e+'keep connecting item after item with a plus sign instead of doing str+= on different lines.';

Think along the lines of a single variable assignment via contamination that is around 35kb in size. I'm not talking the length of the resulting string that gets written, but the length of the concatenation instruction after the equals sign and before the semicolon.

Literally to fix things and make them work I took something like this:

var m=a+b+c+'a whole bunch of text'+c+d+sF(100)+'a lot more text'+a+z+'a whole bunch more text'+q+w+x+y+c+'yada yada yada';
return m;

and broke it up into two variables by replacing one plus sign with a coma new variable name and an equals sign like this:

var m1=a+b+c+'a whole bunch of text'+c+d+sF(100)+'a lot more text'+a+z+'a whole bunch more text'+q,m2=w+x+y+c+'yada yada yada';
return m1+m2;

That's it, I simply broke the instruction up into two parts and made no other changes and the darn thing worked beautifully. When I tried to concatenate the two variables into a single variable before sending it to return, the whole thing stopped working again. For instance the following would break:

var m1=a+b+c+'a whole bunch of text'+c+d+sF(100)+'a lot more text'+a+z+'a whole bunch more text'+q,m2=w+x+y+c+'yada yada yada',m=m1+m2;
return m;