HierMenus CENTRAL: HierMenus In Progress. HierMenus 5.1 Release Notes (2/4)

[previous] [next]

Deploying the Optimized Code Set

We crafted the optimized code set to make its use as painless as possible. In fact, in the majority of cases, you will need to do no more than simply install the optimized versions of the code over the top of your current versions of the code (making sure to save a copy of your existing code first) and it should work as is. There may be a few sticky points to iron out, though, depending on how much customization you've applied to your current HM version (or need to apply to the new code).

Before we touch on those sticky spots, let's go over the architecture of the HM download package to make sure we're on the same page. The HM distribution file (the .ZIP file) still contains the same images and sample HTML pages that it always has. These sample files, by default, utilize the verbose scripts (HM_Loader.js, HM_ScriptIE4.js, HM_ScriptNS4.js, and HM_ScriptDOM.js) as presented in the top level of the ZIP file. Beginning with version 5.1 of HierMenus, an additional subdirectory has been added to the .ZIP file: optimized. Within this optimized subdirectory you'll find the space-optimized versions of the scripts just mentioned, and for those who choose to use the space-optimized code it is these optimized files that you will use when you deploy HM to your site (for general HM setup instructions, please be sure to visit our instructions page). Of course, if you prefer to continue deploying the full length code to your site, you are welcome to do so, in which case you would deploy the full length scripts as found in the top level of your .ZIP file instead of those found in the optimized subdirectory.

For reasons we'll explain below, when configuring the space-optimized version of HM to be used on your site you should make your global variable parameter configurations (see step 2 of our general setup instructions if you are unfamiliar with the global variables) in the HM_Loader.js file that is located in the optimized directory of your .ZIP file, and not in the HM_Loader.js file located in the top level of the .ZIP file. In this way, you'll avoid potential problems with the HM_f_CenterMenu function, as described in the Upgrading section below. The space-optimized version of HM will continue to recognize the verbose versions of the global and page specific parameters, so you can continue, for example, to specify your font-sizes with HM_GL_FontSize or your scrolling preferences with HM_PG_ScrollOver.

Once your global variables are set in the space-optimized version of HM_Loader.js, you simply deploy it and the remaining space-optimized scripts--found in the optimized directory of the .ZIP distribution file--to the Web site directory where you intend to store your HM scripts and you're done. Alternately, if you want to be able to switch back and forth in your pages between the verbose and optimized code sets, you could deploy both sets of scripts to your site (with the optimized code in a special subdirectory, such as optimized) and then simply point to the proper code set when calling the HM_Loader.js in your pages:

<SCRIPT LANGUAGE="JavaScript1.2"
   SRC="/hmscripts/optimized/HM_Loader.js"
   TYPE='text/javascript'></SCRIPT>

Within the HM_Loader.js file, of course, be sure to set the HM_ScriptDir and HM_GL_ImageDir variables as appropriate. Perhaps something like this, for example:

HM_ScriptDir = "/hmscripts/optimized/";
HM_GL_ImageDir = "/hmscripts/images/";

Upgrading From Verbose to Optimized

If you're installing HM for the first time, then using the space-optimized code is as simple as configuring the optimized HM_Loader.js file and then deploying the space-optimized scripts as described above. If, however, you are upgrading from a previous "verbose" version of HM to the space-optimized code, there may be additional concerns for you to resolve.

Your existing HM_Loader.js file may need to be altered, depending on how you've used it in the past. Specifically, if you're using the optional HM_f_CenterMenu function (i.e., you are calling the function from within your HM_Array definitions or elsewhere), then you'll need to replace the verbose version of the function currently found within your existing HM_Loader.js file with the optimized version of the function found in the optimized HM_Loader.js file of the distribution package, and reproduced below (with some additional line breaks for clarity on this page):

function HW(kx){
var b=0;var c=HM_DOM?Hg.document.getElementById(kx):Hg[kx];
var d=HM_DOM?parseInt(c.style.width)+((Hjt||Hju)?0:Hu*2):
      HM_IE4?c.style.pixelWidth:c.clip.width;
var gh=HM_IE?(HM_DOM?Hh.clientWidth:Hg.document.body.clientWidth):
       Hg.innerWidth;
return Math.max(parseInt((gh-d)/2),b);}
HM_f_CenterMenu=HW;

Why this replacement is necessary is described in the Developer's section below. Of course, you may also find it easier to simply reconfigure the global variables in the optimized HM_Loader.js file provided in the ZIP distribution and deploy it directly to your site, rather than upgrading the HM_Loader.js file you have. In either case, once the HM_Loader.js is adjusted, and assuming you've made no other direct customizations to your existing HM_Loader.js or the HM scripts, you can install the scripts themselves (HM_ScriptDOM.js, HM_ScriptNS4.js, and HM_ScriptIE4.js) over the top of your previous scripts (be sure to save a copy--better safe than sorry) and the upgrade process is complete.

If you've made customizations to your existing scripts, however, then you have some further work to do...

Developer's Considerations

If you're one of the brave few who has decided to deploy the optimized code set and you've installed your own customizations to the HM scripts, then you'll need to re-apply those customizations to the optimized scripts before installation. This is not the simplest of tasks, since the optimized code set is not intended to be human-legible; but it can be done and here we provide a few pointers as to how to go about applying the changes. Also bear in mind that any code that you've written that relies on internal variables within the HM scripts will need to be adjusted--since it's more than likely that the variable names you're relying on are no longer valid within the optimized HM scripts. This is the exact reason that the HM_f_CenterMenu needed to be replaced as described in the upgrading section above--HM_f_CenterMenu relied on internal variable names within the HM scripts and therefore needed to be changed to reflect the new "optimized" variable names.

The good news is that the optimized code set is, for the most part, not actually new logic but rather simply lighter code. Thus, when searching for the spot to effect changes in the optimized code set, you'll find it's laid out in the same order and employs the same logic as in the full length verbose code. Thus, the changes you make in the optimized code will be logically the same as they would be in the verbose code; they'll just utilize the shorter function and variable names.

There are, however, two exceptions to this rule that you need to be aware of:

1. Parameter assignment logic is changed in the optimized code set so as to recognize the full length version of global and page specific variables and translate them to the shortened form that is then used internally in the optimized scripts. This required adjustments to the HM_a_Parameters array (Hj in the optimized code set) and the HM_f_AssignParameters function (HW1). Further, the HW1 function was extended such that it will also recognize the shortened version of the global and page specific parameters as well, allowing you to "optimize" your parameter settings, if you so choose. In other words, with the optimized code set in place, you can specify the global font size with HM_GL_FontSize = 10 or HM_GL_m = 10.

2. The HM_f_AssignParameters function (HW1 in the optimized code set) was modified slightly so as to not use eval statements. The additional eval statements seemed to trigger a bizarre bug in IE5 for windows (that we'll revisit a little later in this article) and therefore we use the window as an associative array to "find" our global and page specific variables instead. This problem is not as prevalent in the verbose code, so we've chosen to make the change only in the optimized code at this time.

When applying your new code to the optimized code set, you'll probably need to cross-reference the "verbose" function and variable names with the "optimized" versions. Such a cross-reference is provided via the link below (which opens in a new window).

Verbose vs. Optimized Cross Reference

Using the above cross-reference, for example, you can see that where the verbose scripts refer to the HM_a_TreesToBuild array, the optimized versions will use Has instead. And if the verbose scripts call the HM_f_MenuOver() function, the optimized scripts will simply call HWf().

Technical Considerations

Finally, a few quick notes about the optimization process itself that may be of interest to you.

As mentioned previously, the space-optimized versions of the HM code are--for the most part--logically identical to the verbose versions, which means that the space-optimized versions of the code offer no performance improvement over the full length versions (other than the obvious reduction in download times). The byte reductions in the optimized code come entirely from:

1. Removal of comments
2. Removal of most unneeded white space (including many line breaks)
3. Shortening of variable and function names

This last point requires some further discussion. In shortening our variable and function names we've tried to ensure that the new names will not collide with existing scripts on your page by prefixing all global variables and functions with the letter "H." This makes the optimized scripts slightly longer than they theoretically need to be, but we felt this would--at least in general--be much safer than assigning 1 character global variables or functions. The very fact that we're now using short, non-descriptive variable names, however, raises the possibility that we've chosen a variable name that is identical to a variable name that you're using in another script on your pages. You may, therefore, need to review your additional JavaScripts and/or test them against the optimized code before you settle on deploying it. Of course, you can always change the variable names either in the HM script or your additional scripts as necessary to avoid the collisions.

Developers who are interested in pursuing the topic of Web site optimization are encouraged to check out WebRef Founder Andy King's site WebSiteOptimization.com, which is devoted to his Web Site Optimization service, optimization related topics and headlines, and his book "Speed Up Your Site: Web Site Optimization."

The optimized code set was not the only change made to HM version 5.1. On the next page we take a look at how we've corrected a design-based limitation in cross-frames implementations.

[previous] [next]