javascript - Why is this code's execution speed so different? - Stack Overflow

admin管理员组

文章数量:1415644

In Internet Explorer 7, this code executes consistently in 47 ms:

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

however, this code executes consistently in 157 ms:

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

Passing a number is over 3x faster than a string. Why are these results so dramatically different? And, is there any way to help the performance of the string?

In Internet Explorer 7, this code executes consistently in 47 ms:

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

however, this code executes consistently in 157 ms:

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

Passing a number is over 3x faster than a string. Why are these results so dramatically different? And, is there any way to help the performance of the string?

• javascript
• jquery

Share Improve this question Follow asked Jan 14, 2011 at 22:20 Stephen WatkinsStephen Watkins 25.8k1717 gold badges7070 silver badges102102 bronze badges 4

• 5 probably because strings have to be parsed for html content while numbers don't. Try running the same test with .text instead of .html and see if there is still a big difference. – Martin Jespersen Commented Jan 14, 2011 at 22:22
• I believe, its because jquery is parsing the string as html. – Ish Commented Jan 14, 2011 at 22:24
• 4 Have you tried with text instead of html? Would be interesting. – Felix Kling Commented Jan 14, 2011 at 22:24
• @Felix: we got the same idea there, i was editing my original ment while you wrote yours :) – Martin Jespersen Commented Jan 14, 2011 at 22:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 9

If you look at the jQuery source code (or even the unminified production version), you'll see that the if (typeof value === "string" ... branch of the code is significantly more plex than the final else version that will occur when you pass in a number.

Here's the 1.4.4 code for if the value is a string:

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

Here's what it does with a number:

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

Clearly, the overhead of all those additional checks and function calls add up. I mean, even just in the if statement at the top, there are three regular expression tests, a map lookup, and a string being made lower case — and that's before we get into the body of the statement (if we do, perhaps one of the checks returns false), which involves a further regex (as part of a parameterized replace) and a loop...

I just ran a test and it seemed to confirm my original notion:

.text(string) is as fast as .html(number) ergo there must be string parsing overhead in .html(string)

Whether this overhead is in ie7 or in jQuery is not clear to me. Ie8 doesn't seem to have the same problem, which would suggest that the problem is not i jQuery, but then ie8 has a much faster js engine than ie7...

Numbers can be stored binary, possibly in a single register. Strings have to be stored as, well, a string, in memory. So an optimizing interpreter or JIT-piler will take advantage of the possible speed an integer provides.

Also, as Martin Jespersen points out, the html() function may handle strings differently than numbers, performing more work on it - if it is aware of the differences. Kudos to Martin there.

As T.J. Crowder points out, a look at the source reveals that the code path is quite different for a string; ironically, the associated ment suggests that this is in an attempt to exploit a "shortcut":

html: function( value ) {
        if ( value === undefined ) {
            return this[0] && this[0].nodeType === 1 ?
                this[0].innerHTML.replace(rinlinejQuery, "") :
                null;

        // See if we can take a shortcut and just use innerHTML
        } 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 if ( jQuery.isFunction( value ) ) {
            this.each(function(i){
                var self = jQuery( this );

                self.html( value.call(this, i, self.html()) );
            });

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

        return this;
    },

本文标签： javascriptWhy is this code39s execution speed so differentStack Overflow