Может ли этот 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

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

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

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

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

jq('input.textInput'); 

вместо:

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

Answer 3

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