Стоит ли добавлять HTML в DOM, используя innerHTML или создавая новые элементы один за другим? - PullRequest
Новая
       17

Стоит ли добавлять HTML в DOM, используя innerHTML или создавая новые элементы один за другим?

17 голосов
/ 23 февраля 2010

Есть два способа добавить HTML-код в DOM, и я не знаю, как лучше всего это сделать.

Первый метод

Первый способ самый простой, я мог бы просто добавить HTML-код (с помощью jQuery), используя $('[code here]').appendTo(element);, что очень похоже на element.innerHTML = [code here];

Второй метод

Другой способ - создать все элементы один за другим, например: 

// New div-element
var div = $('<div/>', {
              id: 'someID',
              class: 'someClassname'
          });

// New p-element that appends to the previous div-element
$('<p/>', {
    class: 'anotherClassname',
    text: 'Some textnode',
}).appendTo(div);

Этот метод использует основные функции, такие как document.createElement и element.setAttribute.

Когда я должен использовать первый метод, а когда второй? Является ли метод два быстрее, чем метод один?

Редактировать - Результат скоростных тестов

Я сделал три теста скорости, из которых следует код: 

$(document).ready(function(){
    // jQuery method - Above mentioned as the second method
    $('#test_one').click(function(){
        startTimer();
        var inhere = $('#inhere');
        for(i=0; i<1000; i++){
            $(inhere).append($('<p/>', {'class': 'anotherClassname' + i, text: 'number' + i}));
        }
        endTimer();
        return false;
    });

    // I thought this was much like the jQuery method, but it was not, as mentioned in the comments
    $('#test_two').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere');
        for(i=0; i<1000; i++){
            var el = document.createElement('p')
            el.setAttribute('class', 'anotherClassname' + i);
            el.appendChild(document.createTextNode('number' + i));
            inhere.appendChild(el);
        }
        endTimer();
        return false;
    });

    // This is the innerHTML method
    $('#test_three').click(function(){
        startTimer();
        var inhere = document.getElementById('inhere'), el;
        for(i=0; i<1000; i++){
            el += '<p class="anotherClassname' + i + '">number' + i + '</p>';
        }                
        inhere.innerHTML = el;
        endTimer();
        return false;
    });
});

Что дало следующие действительно удивительные результаты 

               Test One   Test Two   Test Three  
+-------------+---------+----------+------------+
| Chrome    5 | ~125ms  |  ~10ms   |   ~15ms    |
| Firefox 3.6 | ~365ms  |  ~35ms   |   ~23ms    |
| IE        8 | ~828ms  |  ~125ms  |   ~15ms    |
+-------------+---------+----------+------------+

В целом метод innerHTML кажется самым быстрым и во многих случаях наиболее читаемым.

Ответы [ 3 ]

2 голосов
/ 23 февраля 2010

На самом деле ни один из методов не использует innerHTML, в обоих случаях jQuery преобразует HTML в узлы DOM. Из jquery-1.3.2.js: 

// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
if ( !fragment && elems.length === 1 && typeof elems[0] === "string" ) {
    var match = /^<(\w+)\s*\/?>$/.exec(elems[0]);
    if ( match )
        return [ context.createElement( match[1] ) ];
}

// ... some more code (shortened so nobody falls asleep) ...

// Convert html string into DOM nodes
if ( typeof elem === "string" ) {
    // Fix "XHTML"-style tags in all browsers
    elem = elem.replace(/(<(\w+)[^>]*?)\/>/g, function(all, front, tag){
        return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
            all :
            front + "></" + tag + ">";
    });
    // etc...
}

Вообще говоря, использование innerHTML медленнее, чем манипулирование DOM, потому что он вызывает анализатор HTML (который все равно будет анализировать HTML в DOM).

2 голосов
/ 23 февраля 2010

Я указываю на устаревшую статью для людей, которые проверяют это для себя. Методы DOM на самом деле побеждают innerHTML на всех моих машинах, поэтому я предпочитаю это. Однако на момент написания статьи innerHTML был быстрее на avg. В настоящее время разницу можно увидеть только в огромных наборах данных.

0 голосов
/ 23 февраля 2010

Если я собираюсь повторно использовать div позже в коде, я соберу его и добавлю в переменную, обычно с префиксом $, чтобы я знал, что это объект jquery. Если это разовая вещь, я просто сделаю: 

 $('body').append(the stuff)
...