web applications - script efficiency tips

Wanted to share some tips to speed up slow processes

[broniusm]

Something I do in IE (don't know if it works in other browsers) is rely heavily upon the DHTML dom to avoid making lots of cross-references, etc.

Take, for instance, in one of my web apps, I frequently need to reference the outer TR or TABLE of a clicked element (TD, link within, button within, etc). So, instead of dynamically determining what that outer or container element is each time I click, I just do it the first time and mark the src element with a reference to that outer element for future use. This is most effective (in my mind) on more complicated or thickerly-nested structures, where you're really looking for a specific container object.

Instead of:

var obj_clicked = event.srcElement;
var table = getTable(obj_clicked);
function getTable(e) {
while (e!=null && e.tagName!="TABLE") {
e = e.parentElement;
}
return e;
}

I'd do:

var td = event.srcElement;
var table = getTable(td);
function getTable(e) {
var e_in = e;
 // has this element already been marked with the outer e?
if (e_in.thisTable) {
return e.thisTable;
}
while (e!=null && e.tagName!="TABLE") {
e = e.parentElement;
}
 // if outer element was found, mark the src object with ref
if (e && e.tagName == "TABLE") {
e_in.thisTable = e;
}
return e;
}

In IE (and other browsers?), you can add these sorts of customize attributes to any DHTML object. This is also good to know for previous- or undo-values of inputs, real vs display values, etc.

comments?

[broniusm]

Here's another one. I have an XSL that spits out a table with the left-column of checkboxes. I ref the checkbox for all operations (loading it with .values, .labels, and even pointers to other elements in the same TR).

The first thing I have to do (unless someone can show me how to do this in XSL!) is go thru all chk's and initialize them with ref's to their corresponding input boxes:

var arrChk = document.getElementsByName("chkInvoicePosted");
var arrChklen = arrChk.length;
var chk;
for(var i = 0; i < arrChklen; i++) {
chk = arrChk[i];
chk.oPaymentSubTotal = document.getElementById(chk.namePaymentSubTotal);
chk.oPaymentTax = document.getElementById(chk.namePaymentTax);
chk.oPaymentTotal = document.getElementById(chk.namePaymentTotal);
}

where, in the xsl, each check already has the attribute "namePaymentSubTotal"+nn by doing:

<xsl:attribute name="namePaymentSubtotal">PaymentSubtotal<xsl:value-of name="@Counter"/></xsl:attribute>

Doing it this way instead of doing a document.getElementById("PaymentSubTotal"+counter) each time the check is clicked went from ~25ms to ~12ms per click.

(no, I'm not insane: the ultimate goal is to speed up a coworker's code for 100s of records and auto-checking their corresponding checkboxes)