Why is this code execution speed different?

Question

In Internet Explorer 7, this code runs sequentially at 47 ms:

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

however, this code is executed sequentially at 157 ms:

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

Passing a number exceeds 3 times faster than a string. Why are these results so dramatically different? And, is there a way to help string performance?

Answer 1

If you look at the jQuery source code (or even the underfunded production version), you will see that the if (typeof value === "string" ...code branch is much more complicated than the last version elsethat will occur when passing in quantity.

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), ( ) ...

Answer 2

, , :

.text(string) , .html(number) ergo. .html(string)

ie7 jQuery . Ie8, , , , iQuery, ie8 js-, ie7...

Answer 3

, , . , , , . JIT- , .

, , html() -, , - . .

Answer 4

T.J. , , ; , , "":

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