javascript - 为什么这段代码的执行速度如此不同？

Question

在 Internet Explorer 7 中，此代码始终在 47 毫秒内执行:

function updateObjectValues() {    
    $('.objects').html(12345678); // ~500 DIVs
}

但是，此代码在 157 毫秒内始终如一地执行:

function updateObjectValues() {
    $('.objects').html('12345678'); // ~500 DIVs
}

传递数字比传递字符串快 3 倍以上。为什么这些结果如此不同？还有，有什么方法可以帮助提高字符串的性能吗？

Answer 1

如果您查看 jQuery 源代码(甚至未缩小的生产版本)，您会看到代码的 if (typeof value === "string"... 分支比传入数字时出现的最终 else 版本明显更复杂。

如果值为字符串，这是 1.4.4 代码:

} else if ( typeof value === "string" && !rnocache.test( value ) &&
    (jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value )) &&
    !wrapMap[ (rtagName.exec( value ) || ["", ""])[1].toLowerCase() ] ) {

    value = value.replace(rxhtmlTag, "<$1></$2>");

    try {
        for ( var i = 0, l = this.length; i < l; i++ ) {
            // Remove element nodes and prevent memory leaks
            if ( this[i].nodeType === 1 ) {
                jQuery.cleanData( this[i].getElementsByTagName("*") );
                this[i].innerHTML = value;
            }
        }

    // If using innerHTML throws an exception, use the fallback method
    } catch(e) {
        this.empty().append( value );
    }
}

这是它对数字的作用:

} else {
    this.empty().append( value );
}

显然，所有这些额外检查和函数调用的开销加起来。我的意思是，即使只是在顶部的 if 语句中，也有 三个 正则表达式测试、映射查找和小写的字符串——那是在我们之前进入语句的主体(如果我们这样做，也许其中一个检查返回 false)，这涉及进一步的正则表达式(作为参数化替换的一部分)和循环...