Can this JavaScript be optimized?

Question

This JS will be executed on pages with a lot of fields. Can you see anyway to improve the speed of this code? If so, can you explain what you found?

var _TextInputs = null;
function GetTextInputs()
{
    if (_TextInputs == null)
    {
        _TextInputs = jq('input[type=text]');
    }

    return _TextInputs;
}

var _Spans = null;
function GetSpans()
{
    if (_Spans == null)
    {
        _Spans = jq('span');
    }

    return _Spans;
}


function UpdateRate(ratefield, name)
{
    GetTextInputs().filter('[' + name + ']').each(function()
    {
        this.value = FormatCurrencyAsString(FormatCurrencyAsFloat(ratefield.value));
        CalculateCharge(name.replace('Rate', ''), jq(this).attr(name));
    });
}

function CalculateCharge(name, activity_id)
{
    var inputs = GetTextInputs();
    var bill_field = inputs.filter('[' + name + 'Bill=' + activity_id + ']');
    var rate_field = inputs.filter('[' + name + 'Rate=' + activity_id + ']');
    var charge_field = GetSpans().filter('[' + name + 'Charge=' + activity_id + ']'); 

    charge_field.text(FormatCurrencyAsString(FormatCurrencyAsFloat(bill_field.val()) * FormatCurrencyAsFloat(rate_field.val())));
}

Answer 1

Can you see anyway to make this snappier?

Yes

Answer 2

I can see that you're using attribute filters everywhere, e.g.:

_TextInputs = jq('input[type=text]');

inputs.filter('[' + name + 'Bill=' + activity_id + ']');

Attribute filters are useful, but not especially 'snappy' when compared to more direct class or ID selectors. I can't see any markup so the best I can do is suggest that you use more IDs and classes, e.g.:

jq('input.textInput');

instead of:

jq('input[type=text]');

Answer 3

You can:

• Replace each with while
• Replace val() with .value (should be fine as long as those fields are plain text ones)
• Access elements by class instead of by name/type
• Replace attr() with plain property access; e.g.: this.attr(name) --> this.name

These are all rather unobtrusive changes which should speed things up mainly due to cutting down on function calls.

Don't query elements on every function call if those elements are static (i.e. are not modified during your app life-cycle). Instead, store them outside the loop.

Answer 4

A little off-topic, but I use and recommend Javascript Rocks. This books contains a TON of awesome JS optimisation advice by the creator of Scriptaculous. Also comes with a tool called DOM Monster which helps track down performance bottlenecks - it's an awesome compliment to Firebug as it actually tracks through the DOM looking for inefficiencies based on heuristics and DOM complexity.