Javascript efficiency techniques

[Query]

Hi all,

I'm currently looking at javascript's ability to create complex GUIs for online applications without resorting to too much server-side code, allowing for thin clients without the need for a 1000sq ft datacentre. This has led me to playing with the OO abilities of JS while fully aware of the memory hit.

I'm hoping to get some idea of the techniques that are currently employed to squeeze the most out of those heavier scripts and/or simplify management of a large code base.

As my script get's lengthier I have started aliasing common function calls, i.e. get = document.getElementById , assuming that this will reduce the overall size and transmition time of said script and make it more readable, although I don't know what the drawbacks to this are (aside from the overhead of an additional pointer).

Does anyone else have perfomance / managability tips? Or comments on my abreviation of common functions?

Regards,

-Q

[Sux0rZh@jc0rz]

Variables reduce code size, but increase processing time. So the code gets to there faster, but it takes longer to open it.

If you think about it, a variable adds processing to a line by making the processor have to go read the variable when stated, then go and find the stored variable's information, then post it into the code and re-examine the code so that it can run, whereas if it were just text, it could run the code at first glance without having to go through replacing all the variables first.

[Query]

Yeah, it's always swings and roundabouts, for this particular case the question is, is it more important to save on transmiting X bytes and potentially reduce load time, but have to dereference a pointer every time you getElementById, or are we more concerned with how much of the processor time we are wasting (admittedly as JS is interpreted it could be more complicated than that!). As I have not got an exellent understanding of user agent garbage collection implementations I could be far off the mark by doing this, but for the time being, my code is more legible and more portable (in the e-mailing sense). Has anyone done this with a big script? If so, how bad was it?

Regards,

-Q

[Vladdy]

Renaming functions just to reduce the bytes will not save you much. Efficient, OO programming will.

Once the script is finished you can remove all the comments and whitespace out of it - reduces the size of my files by about 25%: www.klproductions.com/klquiz/scripts/klquiz.js - for example.

[Kor]

well, you might create objects, with functions,for using them later to reduce the code length and the processing time (I guess). They will work as subroutines called only on need. For instance:

// create object and object.attributes as variables
function setObj(id,left,top){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
return this.obj;
}
//now you may set the position of some objects onload
function setup(){
o1= new setObj('1',100,200);
o2= new setObj('2',200,100);
o3= new setObj('3',300,50);
o4= new setObj('4',0,200);
}
onload=setup;

//now you can use variables o1, o2, o3, o4 as objects to modify dinamically the position of objects

function changeSome(){
o1.left=200;
o4.top=100;
//and so on
}

It is useful for movement codes, when there are many objects to be moved ...

This could help also for a cross-browser code...

[Query]

Cool, but with javascript OO you're upping the memory stakes, have you tested the diff in memory requirements for and OO class and the equivalent collection of functions (I know the official line is approx double, but it would be interesting to know if this is the case!) I suppose you create a script to chop the white space out of the final product and also do whatever find/replace work needs to be done as well!

Regards,

-Q

[Query]

Kor,

You know what would be handy, a parser that can suck it's way through user agent specific javascript and pump out scripts in each flavour, i.e. NN, IE. (But for me it's a case of one fine day as I am still mucking my way through the javascript event model!) Then rather than include all code in one file with a series of conditionals, a script to agent-detect and direct to the appropriate dedicated script!

Regards,

-Q

[Query]

Does anyone know about the impact of linking scripts rather than keeping them in your main document?

Regards,

-Q

[Kor]

detecting via method is good enough most of the time
if(document.getElementById)
if(document.all)
if(document.layers)

Well, sometimes you may need an agent or even a version detector. This case a local detector must be used...

But... The safest way is the best way. If events/methods/properties used are all agreed by most of the browsers, these one must be used...

[Query]

Yeah, I wholeheartdly agree, but you could do somthing like if(document.all) document.write("<script type='text/javascript' src='iescript.js'") else document.write("<script type='text/javascript' src='NNscript.js'")rather than the 100 odd if statments I typically see browsing scripts. This I assume (and hope) is for distribution.. Or don't you agree?

Regards,

-Q

[Kor]

Does anyone know about the impact of linking scripts rather than keeping them in your main document?


None. Except that external liks help you to load other page quick, if they use the same JS file, as that file is to be found into the browsers's cache folder locally. And is easier to update a single JS script than two or more similar code lines on two or more html pages.

[nitwit]

http://www.dhtmlkitchen.com/learn/js/perf/index.jsp