Какая разница между jQuery.fn.empty() и jQuery.fn.html('')?

Ответ 1

Между этими двумя функциональными различиями нет. Используйте .empty(), поскольку он короче (более кратким) и более читаемым.

Не беспокойтесь о разнице в производительности. Помните, что jQuery не используется, потому что он работает быстрее, чем ванильный JavaScript — он использовался, потому что он написан быстрее. Время разработки стоит гораздо больше, чем время процессора.

Для сравнения относительной производительности уже существует jsPerf: http://jsperf.com/jquery-empty-vs-html. Каждый тестовый пример показывает, что .empty() быстрее.

Прямо из источника jQuery:

empty: function() {
    for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
        // Remove element nodes and prevent memory leaks
        if ( elem.nodeType === 1 ) {
            jQuery.cleanData( elem.getElementsByTagName("*") );
        }

        // Remove any remaining nodes
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }
    }

    return this;
},

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

.empty() не нужно иметь дело с проверкой различных возможных типов аргументов; он может перейти прямо к выделению элементов DOM.

Ответ 2

Вот фактический исходный код для $(). empty

function() {
    for ( var i = 0, elem; (elem = this[i]) != null; i++ ) {
        // Remove element nodes and prevent memory leaks
        if ( elem.nodeType === 1 ) {
            jQuery.cleanData( elem.getElementsByTagName("*") );
        }

        // Remove any remaining nodes
        while ( elem.firstChild ) {
            elem.removeChild( elem.firstChild );
        }
    }

    return this;
}

Как вы можете видеть, это немного больше, чем .html(''), но, как утверждает Мэтт, jQuery ускоряет разработку, а не исполнение. Как видно из комментариев в коде, существуют преимущества использования .empty vs .html с точки зрения очистки среды после удаления узлов DOM и т.д.

Ответ 3

.empty() намного быстрее, см. здесь: http://jsperf.com/jquery-empty-vs-html/17