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 Responses to innerHTML — тормоз

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

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

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

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

  5. i0nn:

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

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

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

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

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

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

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

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

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

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: