Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.07.2014, 14:33
Профессор
Посмотреть профиль Найти все сообщения от newobject
 
Регистрация: 10.07.2014
Сообщений: 145

Есть ли тут обращение к 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-интерфейса, остаются ли обращения к этим элементам по прежнему дорогими?
Ответить с цитированием
  #2 (permalink)  
Старый 19.07.2014, 14:56
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Сам 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
Ответить с цитированием
  #3 (permalink)  
Старый 19.07.2014, 15:00
Аватар для Erolast
Профессор
Отправить личное сообщение для Erolast Посмотреть профиль Найти все сообщения от Erolast
 
Регистрация: 24.09.2013
Сообщений: 1,436

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

Последний раз редактировалось Erolast, 19.07.2014 в 15:03.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jquery - есть ли смысл? розовый слоник jQuery 57 20.04.2011 00:20
Обработка DOM после Ajax-запроса Игорь87 Общие вопросы Javascript 2 05.01.2011 19:23
Как добавить элемент в XML через DOM используя PHP? bayah Серверные языки и технологии 6 11.08.2010 13:33
Где найти справочник методов DOM? master_alf Events/DOM/Window 6 16.04.2010 12:25
Обращение к элементам сайта Воитель Элементы интерфейса 6 20.08.2009 11:26