Можно ли оптимизировать этот JavaScript?

Question

Этот JS будет выполняться на страницах с большим количеством полей. Можете ли вы увидеть, как улучшить скорость этого кода? Если да, то можете ли вы объяснить, что вы нашли?

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

Вы можете:

• Заменить each на while
• Заменить val() на .value (должно быть хорошо, если эти поля являются текстовыми)
• Доступ к элементам по классу, а не по имени / типу
• Заменить attr() на доступ к простой собственности; например: this.attr(name) -> this.name

Это все довольно ненавязчивые изменения, которые должны ускорить процесс, главным образом из-за сокращения вызовов функций.

Не запрашивать элементы при каждом вызове функции , если эти элементы являются статическими (т.е. не изменяются в течение жизненного цикла приложения). Вместо этого храните их вне цикла.

Answer 2

Я вижу, что вы используете фильтры атрибутов везде, например ::1001

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

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

Фильтры атрибутов полезны, но не особенно «быстрые» по сравнению с более прямыми селекторами классов или идентификаторов. Я не вижу никакой разметки, поэтому лучшее, что я могу сделать, это предложить вам использовать больше идентификаторов и классов, например ::

jq('input.textInput');

вместо:

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

Answer 3

Немного не по теме, но я использую и рекомендую Javascript Rocks . Эта книга содержит ТОННУ удивительных советов по оптимизации JS от создателя Scriptaculous. Также поставляется с инструментом под названием DOM Monster, который помогает отследить узкие места в производительности - это потрясающий комплимент Firebug, поскольку он фактически отслеживает DOM в поисках неэффективности, основанной на эвристике и сложности DOM.