Почему вызов .empty () перед .html () быстрее?

Question

Я заполняю таблицу вызовом ajax.Я могу перезагрузить содержимое таблицы, сделав еще один вызов ajax.Первоначальный запрос занимает 50 мс, но любые последующие запросы занимают 2 секунды для обновления таблицы.Разница лишь в том, что таблица пуста для начального вызова.

Это таблица с множеством строк и вложенных таблиц.Контейнер таблицы начинается с свойства отображения css, равного «none», и tbody empty.

<div class="table-container">
    <table>
        <tbody>
        </tbody>
    </table>
</div>

Tbody таблицы пуст перед первым вызовом.Я начал с этого, но последующие вызовы занимают около 2 секунд для загрузки.

function LoadData(dataFromAjax) {
    $('.table-container tbody').html(dataFromAjax);
    $('.table-wrapper').css('display','inline-block');
}

Предварительный вызов .empty () решает проблему (загружается через 50-100 мс), но я не уверен, почему это необходимо.

function LoadData(dataFromAjax) {
    $('.table-container tbody').empty();
    $('.table-container tbody').html(dataFromAjax);
    $('.table-wrapper').css('display','inline-block');
}

Я думал, что готов, что jQuery сначала очищает дочерние элементы целевого элемента при использовании .html ().Я что-то упустил?

Answer 1

Посмотрите на html() определение функции jQuery.Есть попытка использовать innerHTML, где он повторяется по всем существующим элементам.Я думаю, это то, где он проводит все это время:

// See if we can take a shortcut and just use innerHTML
...
try {
  for ( ; i < l; i++ ) {
    elem = this[ i ] || {};

    // Remove element nodes and prevent memory leaks
    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 ) { // fallback code
  this.empty().append( value );
}