.append VS .html VS [removed] performance

前端 未结 7 1650
星月不相逢
星月不相逢 2020-11-28 21:16

This site\'s run a test between the 3 different methods and it seems .html is the fastest, followed by .append. followed by .innerHTML

7条回答
  •  -上瘾入骨i
    2020-11-28 21:56

    How can .html be faster than .innerHTML when the .html is using .innerHTML with a lot of extra code? Here .html implementation in jQuery (taken directly from jQuery file).

    html: function( value ) {
        return jQuery.access( this, function( value ) {
            var elem = this[0] || {},
                i = 0,
                l = this.length;
    
            if ( value === undefined ) {
                return elem.nodeType === 1 ?
                    elem.innerHTML.replace( rinlinejQuery, "" ) :
                    undefined;
            }
    
            // See if we can take a shortcut and just use innerHTML
            if ( typeof value === "string" && !rnoInnerhtml.test( value ) &&
                ( jQuery.support.htmlSerialize || !rnoshimcache.test( value )  ) &&
                ( jQuery.support.leadingWhitespace || !rleadingWhitespace.test( value ) ) &&
                !wrapMap[ ( rtagName.exec( value ) || ["", ""] )[1].toLowerCase() ] ) {
    
                value = value.replace( rxhtmlTag, "<$1>" );
    
                try {
                    for (; i < l; i++ ) {
                        // Remove element nodes and prevent memory leaks
                        elem = this[i] || {};
                        if ( elem.nodeType === 1 ) {
                            jQuery.cleanData( getAll( elem, false ) );
                            elem.innerHTML = value;
                        }
                    }
    
                    elem = 0;
    
                // If using innerHTML throws an exception, use the fallback method
                } catch(e) {}
            }
    
            if ( elem ) {
                this.empty().append( value );
            }
        }, null, value, arguments.length );
    }
    

提交回复
热议问题