javascript document.createElement или HTML-теги

Question

Я смущен следующим стилем написания кода. Я хочу знать, который является практическим и эффективным метод для вставки тега HTML в документе.

Javascript:

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>'; 

ИЛИ

var itd=document.createElement('div'), 
    ita=document.createElement('a'), 
    idt=document.createTextNode('hello world'); 
    iat=document.createTextNode('click me'); 
    idn=document.createTextNode('also'); 

    ita.appendChild(iat); 
    itd.appendChild(idt); 
    itd.appendChild(ita); 
    itd.appendChild(idn) 

    docuemtn.getElementById('demoId').appendChild(itd); 

Какой самый быстрый и лучший способ?

Answer 1

Хорошо, просто подумайте о том, что делает каждый из них. Первый принимает строку, анализирует ее, а затем вызывает document.createElement, document.appendChild и т. Д. (Или аналогичные методы) на основе результата синтаксической строки. Во-вторых, это уменьшает рабочую нагрузку на браузер, поскольку вы прямо заявляете, что хотите.

See a comparison on jsPerf

В соответствии с JSPerf вариант 1 примерно в 3 раза медленнее, чем вариант 2.

На тему варианта ремонтопригодности 1 гораздо проще писать, но называть меня старомодным, я бы предпочел использовать вариант 2, поскольку он чувствует себя намного безопаснее.

Редактировать

После нескольких результатов начали поступать, то различающиеся результаты задето мое любопытство. Я проверил тест дважды с каждым из установленных браузеров. Вот скриншот результатов из jsPerf после всех тестов (операции/секунда, выше - лучше).

Так браузеры, кажется, сильно отличаются в том, как они обрабатывают два метода. В среднем вариант 2, по-видимому, быстрее из-за большого разрыва Chrome и Safari в пользу варианта 2. Мой вывод состоит в том, что мы должны просто использовать то, что лучше всего подходит или лучше всего соответствует стандартам вашей организации, а не беспокоиться о том, что более эффективно.

Главное это упражнение научило меня это не использовать IE10 несмотря на большие вещи, которые я слышал об этом.