LINUX.ORG.RU

Обращения к DOM

 ,


0

1

Я читал, что оперерации с 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-интерфейса, остаются ли обращения к этим элементам по прежнему дорогими?



Последнее исправление: anonimous (всего исправлений: 2)

Есть, конечно. Так, как вы изменяете свойства добавленных ранее элементов, изменение DOM-модели в данных операциях ничем не отличается от аналогичного кода, в котором отсутсвует обёртка create.

lucentcode ★★★★★
()

пока не вызвал каскад reflow в браузере, обращение к DOM не такое и дорогое, и не важно где и как ты их вытащил.

ksim
()

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

Если я нажимаю пальцем на выключатель, в комнате загорается и гаснет свет. Будет ли свет загораться и гаснуть, если я, скажем, буду наживать на кнопку карандашом?

i-rinat ★★★★★
()
Ответ на: комментарий от ksim

пока не вызвал каскад reflow в браузере, обращение к DOM не такое и дорогое, и не важно где и как ты их вытащил.

ну, если нижеследующее определение считать правильным:

Reflow — это процесс пересчёта положения разных элементов на странице, которым браузер занимается как при первоначальной загрузке урла, так и потом при некоторых изменениях содержимого яваскриптом.

Насколько я понимаю, созданный элемент не занимает какого-литбо положения на странице, не перерисовывается. Тем не менее, мой тест


create=function(el){
   the_el=document.createElement(el)
   return the_el
}

append=function(el){document.body.appendChild(el)}


p1=create("p")
p2=create("p")

p1.innerHTML=""
str=""

i=10000
test=function(f, i){
	console.time(f.name)
		while(i--){f()}
	console.timeEnd(f.name)
}

function f_created(){p1.innerHTML+="a"}
function f_no_created(){str+="b"}

test(f_created, i)
test(f_no_created, i)

p2.innerHTML=str

append(p1)
append(p2)

//chrome:
//f_created: 3983.000ms test.js:58
//f_no_created: 2.000ms 
//
//opera:
//f_created: 3738ms (3737521µsec)
//f_no_created: 45ms (45467µsec)
//
//FF:
//f_created: 2406ms
//f_no_created: 11ms

Показывает нехилую разницу. Т.е. если даже элемент просто создан, но не добавлен на страницу, обращение к нему отжирает нехило.

anonimous
() автор топика
Ответ на: комментарий от ksim

Ну Вы же писали

пока не вызвал каскад reflow в браузере, обращение к DOM не такое и дорогое

тут ведь reflow нет? Что не так?

anonimous
() автор топика
Ответ на: комментарий от anonimous

А что так в твоём примере?

сравни скорость работы DOM использовав:

function f_created(){p1.appendChild(document.createTextNode("a"))}

//f_created: 16.399ms test.js:19
//f_no_created: 7.103ms 

ksim
()
Ответ на: комментарий от anonimous

Может, так же как и криво написанный js может вызывать тормоза и без обращения к DOM.

ksim
()
Ответ на: комментарий от ksim

ок
к чему цепляться из-за скорости DOM?
Webkit сливает Xulrunner?

rogerw
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.