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;
};

описание

тестовая страница

8 коммент. to “innerHTML - тормоз”

  1. 4matic Says:

    Где-то в сети видел сравнения по производительности innerHTML и DOM-решение. Одно время замечал глюки в браузерах, когда вставляешь элемент, а стили вставляемого объекта не наследуются. Привык вставлять и удалять элементы через DOM.

  2. jeka911 Says:

    Согласен, через dom лучче во всех отношениях. Но, кроме скорости разработки. Ну это как еще один из тех вариантов, когда можно “лучше, но дольше”, а можно “быстрей и бог в помощь” :)

  3. Nikita Says:

    Люблю вообще эти createElement, appendChild, replaceChild, removeChild и всё такое… ))

  4. jeka911 Says:

    :)) Жжешь!!! У меня от них тоже голову сносит :)

  5. i0nn Says:

    встроенные функции крайне медленно работают для всех ML, даже для xml

  6. anycolor Says:

    На самом деле боян.

    Смотреть сюда:

    http://jug.org.ua/forum/posts/list/1011.page;jsessionid=A5A5D43BD0D5288923E3888DCE871DB4

    Там и линк есть на тесты..

  7. jeka911 Says:

    ну.. нисавсем.

    результаты то у этих тестов противоположные :)

    Просто там была адская функца решающая дом:
    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.

    Там же элементы только добавлялись.

  8. vint Says:

    Боян или нет - но для меня оказалось полезным! Спасибо!

Ответить