Wenn innerHTML nicht schnell genug ist

StefanB — Thu, 10 Jan 2008 18:24:16 +0000

Es gibt mehrere Wege Inhalt auf einer Seite auszutauschen. Man kann das DOM Modell verwenden, welches von W3 Konsortium standardisiert worden ist. Die gebräuchlichere Variante ist jedoch in den meisten Fällen innerHTML zu benutzen. Auch ist die Verwendung von innerHTML mit den meisten Browsern schneller als die Verwendung der DOM Methoden.

Beispiel:

Hier kommt beliebiger Inhalt Inhalt tauschen

Wenn jedoch viele HTML-Elemente in dem zu tauschendem Inhalt sind, kann das Austauschen durchaus etwas Zeit in Anspruch nehmen.

Steven Levithan stellt in seinem Blog mit replaceHTML eine JavaScript-Funktion vor, welche diese Aufgabe schneller erledigen kann.

Code:

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

Beispiel für die Benutzung:

// innerHTML
el.innerHTML = newHtml
 
// replaceHTML
el = replaceHtml(el, newHtml);

Wenn man nur wenige Elemente überschreibt macht die Benutzung von replaceHTML allerdings wenig Sinn. Seine Stärken kann die Funktion nur ausspielen wenn man wirklich viele Elemente austauscht. Und da vor allem beim Verwerfen von vorhandenen Elementen.
Einen kleinen Benchmark, der im Browser läuft, stellt er auch gleich zur Verfügung: Link

trafex » replaceHTML

Wenn innerHTML nicht schnell genug ist