innerHTML - тормоз
Оказывается, что innerHTML может быть ужасным тормозом, если после его изменения перестраивается dom. Вот такая функция работает намного быстрей:
/* This is much faster than using (el.innerHTML = value) when there are many
existing descendants, because in some browsers, innerHTML spends much longer
removing existing elements than it does creating new ones. */
function replaceHtml(el, html) {
var oldEl = (typeof el === "string" ? document.getElementById(el) : el);
/*@cc_on // Pure innerHTML is slightly faster in IE
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* Since we just removed the old element from the DOM, return a reference
to the new element, which can be used to restore variable references. */
return newEl;
};
Сентябрь 14, 2007 at 1:26 пп
Где-то в сети видел сравнения по производительности innerHTML и DOM-решение. Одно время замечал глюки в браузерах, когда вставляешь элемент, а стили вставляемого объекта не наследуются. Привык вставлять и удалять элементы через DOM.
Сентябрь 14, 2007 at 2:25 пп
Согласен, через dom лучче во всех отношениях. Но, кроме скорости разработки. Ну это как еще один из тех вариантов, когда можно “лучше, но дольше”, а можно “быстрей и бог в помощь” :)
Сентябрь 14, 2007 at 3:36 пп
Люблю вообще эти createElement, appendChild, replaceChild, removeChild и всё такое… ))
Сентябрь 14, 2007 at 5:48 пп
:)) Жжешь!!! У меня от них тоже голову сносит :)
Сентябрь 15, 2007 at 12:04 дп
встроенные функции крайне медленно работают для всех ML, даже для xml
Сентябрь 15, 2007 at 1:13 дп
На самом деле боян.
Смотреть сюда:
http://jug.org.ua/forum/posts/list/1011.page;jsessionid=A5A5D43BD0D5288923E3888DCE871DB4
Там и линк есть на тесты..
Сентябрь 15, 2007 at 2:57 дп
ну.. нисавсем.
результаты то у этих тестов противоположные :)
Просто там была адская функца решающая дом:
http://www.gloo.ru/app/jsbenchmarks/DHTMLBenchmark.js
на парсинг которой мой мозг потратил минут пять, что там говорить о браузере ))))
Здесь же смысл немного в другом:
# This is much faster than using (el.innerHTML = value) when there are many
# existing descendants, because in some browsers, innerHTML spends much longer
# removing existing elements than it does creating new ones.
Там же элементы только добавлялись.
Март 5, 2008 at 3:35 пп
Боян или нет - но для меня оказалось полезным! Спасибо!