Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Есть ли тут обращение к DOM? (https://javascript.ru/forum/events/48853-est-li-tut-obrashhenie-k-dom.html)

newobject 19.07.2014 14:33

Есть ли тут обращение к DOM?
 
Я читал, что оперерации с DOM являются дорогостоящими. Вот допустим, у меня есть код:
create=function(el){
   the_el=document.createElement(el)
   document.body.appendChild(the_el)
   return the_el
}

p=create("p")
div=create("div")

p.innerHTML="foo"
div.innerHTML="bar"

Вопрос: в двух последних строках есть обращения к DOM (явные или не явные)? будут ли тут тормоза, связаные с DOM-операциями?

То есть, если сформулировать более обще: если мы вытаскиваем DOM-элементы на уровень JS-интерфейса, остаются ли обращения к этим элементам по прежнему дорогими?

ixth 19.07.2014 14:56

Сам DOM не очень тормозной, тормоза вызваны различными внутренними пересчетами браузера при изменении страницы. Т.е. все просто: пока твой элемент не присоединен к документу, ты можешь делать с ним все, что угодно и это не вызовет особых тормозов. Так что лучше сначала добавить контент, а потом присоединять к документу. Как-то так:

function create(name, context) {
    var element = document.ceateElement(name);
    element.innerHTML = content;
    return element;
}

var p = create('p', 'foo');
var div = create('div', 'bar');

document.body.appendChild(p);
document.body.appendChild(div);


Плюс, если тебе надо создать и приаттачить несколько элементов, можно воспользоваться DocumentFragment: http://learn.javascript.ru/multi-insert

Erolast 19.07.2014 15:00

Хочу заметить, что при добавлении через innerHTML на определенных объемах браузер начинает люто тормозить, ибо он при каждом новом изменении сего свойства полностью пересчитывает содержимое элемента. При использовании appendChild такой проблемы нету.


Часовой пояс GMT +3, время: 19:04.