Самый быстрый способ создания элементов HTML?

Question

Рассмотрим этот пример кода:

function appendText() 
{ 
    var txt1="<p>Text.</p>";    // Create element with HTML 

    var txt2=$("<p></p>").text("Text."); // Create with jQuery 

    var txt3=document.createElement("p"); // Create with DOM 
    txt3.innerHTML="Text."; 

    $("p").append(txt1,txt2,txt3);   // Append the new elements 
} 

В коде выше я создал пункты с использованием трех различных методов. Я хочу знать, какой из них быстрее & более эффективен в телефонной загарке?

Answer 1

var txt1="<p>Text.</p>";    // Create element with HTML 
// actually: $('<p>Text.</p>'); 

В этом случае JQuery создаст <div> элемент, а затем установить его свойство .innerHTML в HTML строку вы прошли. Это не особенно быстро.

var txt2=$("<p></p>").text("Text."); // Create with jQuery 

Это намного быстрее, потому что JQuery оптимизирован для отображения этого прямо createElement() и вы используете .text() так не требуется никакого дополнительного разбора.

var txt3=document.createElement("p"); // Create with DOM 
txt3.innerHTML="Text."; 

Это уклоняется некоторые части двух подходов и должны быть быстрее, но не потому, что вы используете .innerHTML, который должен получить разобран первым.

Самый быстрый бы это:

var txt4 = document.createElement('p'); 
txt4.textContent = 'Text.'; 

Proof

Обратите внимание, что, когда я говорю быстро, это основано на результатах данного конкретного теста; как правило, вы не дойдете до точки, где это имеет значение. Кроме того, родная версия намного быстрее, что отдельный тест должен был бы сделать, чтобы получить более точные результаты для других тестов :)

Answer 2

Самый быстрый среди них:

var txt3=document.createElement("p"); // Create with DOM 
    txt3.innerHTML="Text."; 

Потому что, когда ты используйте JQuery для добавления какого-либо элемента, он проходит через всю DOM для поиска конкретного идентификатора, который вы хотите добавить. При использовании встроенного JS он будет проходить до тех пор, пока не найдет 1-е место существования элемента, который вы хотите добавить.

EG:

<div id="a"> 
     <div id="b"> 
      <div id="c"></div> 
     </div> 
</div> 

Предположим, что вы хотите добавить некоторый текст в «Ъ», JQuery будет проходить до «с», а родной JS будет проходить только до «б» [первый экземпляр этого ID]