Блог

Я хорошо помню, что использование реализации DOM для создания новых HTML-элементов в документе считалось намного медленнее, чем присвоение HTML-строки свойству ‘innerHTML’ применимого элемента HTML.

Применяется ли то же самое при создании XML-документов с использованием JavaScript? Вместо того, чтобы использовать различные методы создания реализации DOM, было бы быстрее просто сгенерировать строку XML и проанализировать ее?

Просто кое-что, о чем я задумался …. 🙂

* РЕДАКТИРОВАТЬ — добавлен пример *

Что быстрее? (Я буду использовать функцию parseXML от jQuery для выполнения примера синтаксического анализа):

 var myXdoc = $.parseXML("<person><name>Bob</name><relation>Uncle</relation>");
  

Или

 var myXdoc

if (window.ActiveXObject) {
    myXdoc = new ActiveXObject("Microsoft.XMLDOM");
    myXdoc.async = false;
}
else if (document.implementation amp;amp; document.implementation.createDocument)
    myXdoc = document.implementation.createDocument("", "", null);

var p = myXdoc.documentElement.appendChild(myXdoc.createElement("person"));
var n = p.appendChild(myXdoc.createElement("name"));
n.appendChild(myXdoc.createTextNode("Bob"));
var r = p.appendChild(myXdoc.createElement("relation"));
r.appendChild(myXdoc.createTextNode("Uncle"));
  

Первое, что мы должны знать, почему createDocument() может быть медленным. Причина в том, что DOM активен, и если вы его изменяете, это вызывает повторную проверку дерева DOM и, возможно, перерисовку сайта. Каждый раз. Но мы могли бы избежать этой ненужной повторной проверки и повторного рисования, используя createDocumentFragment() . DocumentFragment не является частью DOM и поэтому не вызывает никаких событий. Таким образом, вы можете создать свою полную часть DOM и на последнем шаге добавить ее в дерево DOM. Я думаю, что это самый быстрый способ создания больших частей DOM.

ОБНОВЛЕНИЕ Я протестировал его в Firefox 7 с помощью Firebug. Код:

 console.time("a");
for(var i=0; i<1000; i  ) {
$.parseXML("<person><name>Bob</name><relation>Uncle</relation></person>")
}
console.timeEnd("a");

console.time("b");
for(var i=0; i<1000; i  ) {
var myXdoc
if (document.createDocumentFragment) {
    myXdoc = document.createDocumentFragment();
}
var p = myXdoc.appendChild(document.createElement("person"));
var n = p.appendChild(document.createElement("name"));
n.appendChild(document.createTextNode("Bob"));
var r = p.appendChild(document.createElement("relation"));
r.appendChild(document.createTextNode("Uncle"));
}
console.timeEnd("b");
  

Результат: «a» около 140 мс, а «b» около 35 мс. Таким образом, версия синтаксического анализа строк работает медленнее.

UPDATE2 Очень вероятно, что второй вариант работает быстрее и в любом другом браузере. Потому что метод parse также должен создавать объект DOM, и очень вероятно, что он использует те же методы (например: document.createElement ). Поэтому метод parse не может быть быстрее. Но это медленнее, потому что сначала нужно проанализировать строку.