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())));
}

Firebug has a great javascript profiler. That will show you where the time is actually being spent. — harpo
– harpo, Commented Aug 25, 2009 at 19:49
IE 8 also has a great JavaScript profiler built in. Press F12. — Craig Stuntz
– Craig Stuntz, Commented Aug 25, 2009 at 21:15
@harpo: If you throw up an answer I'll give it to you. Your comment was way more helpful then you probably thought. — ChaosPandion
– ChaosPandion, Commented Aug 25, 2009 at 21:33

kangax · Accepted Answer · 2009-08-25 22:42:50Z

5

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.

edited Aug 25, 2009 at 22:42

answered Aug 25, 2009 at 22:19

kangax

39.2k13 gold badges101 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ChaosPandion Over a year ago

Between the Firebug profiler and some (in retrospect) obvious temporary variables I did manage to make this code "snappier". Thanks.

karim79 · Accepted Answer · 2009-08-25 20:01:01Z

4

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]');

answered Aug 25, 2009 at 20:01

karim79

343k67 gold badges420 silver badges409 bronze badges

Comments

Toby Hede · Accepted Answer · 2009-08-25 23:02:23Z

0

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.

answered Aug 25, 2009 at 23:02

Toby Hede

37.3k28 gold badges139 silver badges164 bronze badges

Collectives™ on Stack Overflow

Can this JavaScript be optimized?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related