Собрался оптимизировать один свой старый скриптик под новую задачу, но оказалось, что всё написано не так... И как всегда, проще написать заново. Но раз уж заново, значит и подойти к вопросу следует обтсоятельно. Подошел... Загрузился вопросом о самом быстром создании элементов -  innerHTML или createElement?

Нарисовал страничку. (осторожней с Мозиллой, открывайте отдельным процессом.)

Ну, и код...



Над кодом не смеяться! Лепил как попало....

Скорость Оперы поражает воображение....   

Mozilla, при создании через createElement, как то, хитровы...ано выдает результат... У меня старенький P4 3GHz, дак Mozilla, на первое нажатие кнопки "createElement" визуально значительно медленнее срабатывает чем IE, но время показывает всего раза в полтора большее. А если нажимаю второй раз, то уходит на долго в штопор... но после выхода, время опять то-же!   



Это сообщение отредактировал(а) Ghirik - 28.5.2008, 05:55

Ну, собственно, этого и следовало ожидать. innerHTML - обычная строка, и, разумеется, браузеры тратят неимоверное количество ресурсов, чтобы распарсить в ней каждый элемент. Но почему бы это не сделать один раз, а потом (в цикле) при совпадении строковых значений просто создавать элементы по старой схеме. Ан нет... парсится каждый вывод innerHTML.

значит, однозначно заниматься креатэлементизмом?

innerHTML несколько быстрее (особенно в IE), но, насколько мне известно, сбрасывает некоторые изменения DOM (напр. значения и состояния динамически добавленных элементов форм), поэтому для высокодинамичных страниц может привести к непредсказуемым последствиям. DOM-методы в общем случае медленее, зато надежнее.

хм, а мне показалось, что Ghirik говорит о том что inner наоборот тяжеле переваривается браузерами (больше ресурсов != больше времени ?)


у меня просто есть ситуация, где я генерирую много таблиц из данных средствами DOM, а часть innerHTML (вложенные слои)
нужно ли полностью переводить на DOM?

Если кроме этого навороченной динамики на странице нет, лично я бы оставил innerHTML. Как раз в случае таблиц разница в скорости особенно заметна.

страх какой, пошла идея прахом... впрочем доведу и выложу, там отладим как лучше

Ну, не совсем...    
Я то ж, всё анимацией занимаюсь, потому для меня результат остался результатом.

Ужас...   Как плохо у IE с генерацией таблиц.... А это, пожалуй, один из основных элементов в вэбе. Если Mozilla так чудненько справляется с табличками, попробую провести тест динамического изменения размеров таблиц и дивов. А вдруг, динамика с таблицами пойдет лучше... Меня сейчас сильно интересует одновременное плавное изменение размеров у 5-20 элементов на странице, потому и начал эти тестирования. Скоро выложу последнее решение по плавному движению, выкинул полностью все вычисления из динамического процесса. Потестируем...

Я тоже давно перешел на DOM - это грамотнее и быстрее (в работе). Единственное - из-за величин проектов не всегда хочется уделять столько времени созданию структуры, проще всунуть все в innerHTML.
Иногда и вовсе без DOM не обойтись ... особенно в динамических проектах.
А иногда вывод возможен только через innerHTML - например, вывод кусков страницы, полученных по ajax'у - иначе можно задолбаться самому парсить код или, что еще утомительней - создавать структуру на сервере, которую сможет обрабатывать клиент.
Так что вопрос удобства остается на совести каждого, но скорость почти (!) всегда за DOM'ом. Почти - это потому, что td_element.innerHTML = "aaa" будет быстрее, чем td.element.insertAdjacentText("afterEnd", "aaa") или что-то типа var aaa = "aaa"; td_element.appendChild(aaa).

IE 7   
Time of generation createElement 125 milliseconds   
Time of generation innerHTML 57437 milliseconds 

Itsys, таблицы?

или это не тест, а откудато взято?

Это, похоже, результат теста Ghirikа из первого поста на какой-то достаточно слабой машине. Никто не спорит, множественное изменение innerHTML в цикле - жестокий крэш-тест для браузера, это, имхо очевидно. Сравнивать есть смысл два следующих подхода - непосредственная работа с DOM (createElement+appendChild etc.) vs. генерация общего кода нужной разметки в виде строки и однократное внедрение ее в нужное место через innerHTML. Именно к этому сравнению относятся тест http://www.quirksmode.org/dom/innerhtml.html и мои комменты здесь .

тест написан совершенно неверно, так как
1. document.getElementById('td') - каждый раз вызываем поиск элемента с указанными id
2. while (i--) {
        document.getElementById('td').innerHTML += "<div style='border: 1px solid #0000FF; width: 0px; height: " + i + "px; float: left;' id='div'" + i + " onclick='qwe()'></div>";
    }

используется контактация строк, причем неоптимизированная. 

Понятное дело, всё на скорую руку...



Ну и что? Количество вызовов метода везде одинаковое. Как это может повлиять на достоверность относительных величин?



Не знаком с этим понятием, хоть и использовал.   Что такое контактация строк?

Если мы хотим сравнить быстродействие 2 возможностей, то должны снизить влияние иных методов на результат.

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

На результаты теста сильно влияет контактация строк - сложение фрагментов строки в целое. В Js эта операция совершенно не оптимизирована. Как это исправить:
имеем 2 строки: a + b. получим гораздо быстрее результат, если сделаем так: [a,b].join(''). то есть используем только push и join вместо привычного +. почитайте ppk.

innerHTML имеет сеттер. зачем его каждый раз вызывать, если достаточно одного раза присваиванием одной строки к innerHTML