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) - ＆gt; this.name

这些都是相当不引人注目的变化，这些变化应该可以加快速度，主要是因为减少了函数调用。

如果这些元素是静态的，那么不要在每个函数调用上查询元素（即在应用生命周期中不进行修改）。相反，将它们存储在循环之外。

Answer 2

我可以看到你到处都在使用属性过滤器，例如：

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

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

属性过滤器非常有用，但与更直接的类或ID选择器相比，并不是特别'snappy'。我看不到任何标记，所以我能做的最好就是建议你使用更多的ID和类，例如：

jq('input.textInput');

而不是：

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

Answer 3

有点偏离主题，但我使用并推荐Javascript Rocks。本书包含了Scriptaculous创建者提供的一系列令人敬畏的JS优化建议。还附带了一个名为DOM Monster的工具，它可以帮助追踪性能瓶颈 - 这是对Firebug的一个很棒的称赞，因为它实际上通过DOM来追踪基于启发式和DOM复杂性的低效率。

这个JavaScript可以优化吗？

3 个答案: