Flagrant Badassery

A JavaScript and regular expression centric blog

When innerHTML isn’t Fast Enough

Tuesday, September 11th, 2007 • Related • Filed Under

This post isn't about the pros and cons of innerHTML vs. W3C DOM methods. That has been hashed and rehashed elsewhere. Instead, I'll show how you can combine the use of innerHTML and DOM methods to make your code potentially hundreds of times faster than innerHTML on its own, when working with large numbers of elements.

In some browsers (most notably, Firefox), although innerHTML is generally much faster than DOM methods, it spends a disproportionate amount of time clearing out existing elements vs. creating new ones. Knowing this, we can combine the speed of destroying elements by removing their parent using the standard DOM methods with creating new elements using innerHTML. (This technique is something I discovered during the development of RegexPal, and is one of its two main performance optimizations. The other is one-shot markup generation for match highlighting, which avoids needing to loop over matches or reference them individually.)

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

You can use the above as el = replaceHtml(el, newHtml) instead of el.innerHTML = newHtml.

innerHTML is already pretty fast...is this really warranted?

That depends on how many elements you're overwriting. In RegexPal, every keydown event potentially triggers the destruction and creation of thousands of elements (in order to make the syntax and match highlighting work). In such cases, the above approach has enormous positive impact. Even something as simple as el.innerHTML += str or el.innerHTML = "" could be a performance disaster if the element you're updating happens to have a few thousand children.

I've created a page which allows you to easily test the performance difference of innerHTML and my replaceHtml function with various numbers of elements. Make sure to try it out in a few browsers for comparison. Following are a couple examples of typical results from Firefox 2.0.0.6 on my system:

1000 elements...
innerHTML (destroy only): 156ms
innerHTML (create only): 15ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 0ms (faster)
replaceHtml (create only): 15ms (~ same speed)
replaceHtml (destroy & create): 15ms (11.5x faster)

15000 elements...
innerHTML (destroy only): 14703ms
innerHTML (create only): 250ms
innerHTML (destroy & create): 14922ms
replaceHtml (destroy only): 31ms (474.3x faster)
replaceHtml (create only): 250ms (~ same speed)
replaceHtml (destroy & create): 297ms (50.2x faster)

I think the numbers speak for themselves. Comparable performance improvements can also be seen in Safari. In Opera, replaceHtml is still typically faster than innerHTML, but by a narrower margin. In IE, simple use of innerHTML is typically faster than mixing it with DOM methods, but not by nearly the same kinds of margins as you can see above. Nevertheless, IE's conditional compilation feature is used to avoid the relatively minor performance penalty, by just using innerHTML with that browser.

There Are 97 Responses So Far. »

Comment by DrSlump on 12 September 2007:

Wow! I really didn’t expect it to be such a huge improvement in Firefox. Nice job!

As to the performance in IE, perhaps you can use conditional compilation for that browser by adding the following lines just below the first statement:

/*@cc_on
oldEl.innerHTML = html;
return oldEl;
@*/
Comment by Dean Edwards on 12 September 2007:

Why not use cloneNode() instead of createElement()? That way you can keep the attributes too.
Comment by Steve on 12 September 2007:

Thanks, Dean Edwards and DrSlump! I’ve incorporated both of your comments into the code in this post and on the test page. I’m not sure why I didn’t think of creating a shallow copy with cloneNode()…
Comment by Luca on 13 September 2007:

It’s slower in opera 9.23:

15000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 140ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 31ms (~ same speed)
replaceHtml (create only): 156ms (1.1x slower)
replaceHtml (destroy & create): 1328ms (7.7x slower)
Done.
Pingback by åœ¨ non-IE ç€è¦½å™¨ä¿®æ”¹ innerHTML çš„é€Ÿåº¦ at Gea-Suan Lin’s BLOG on 13 September 2007:

[...] ç•¶ innerHTML é‚„æ˜¯å¤ªæ…¢çš„æ™‚å€™çš„è§£æ³•ï¼šWhen innerHTML isnâ€™t Fast Enough…ã€‚ [...]
Comment by Dmitry on 13 September 2007:

Anyway, it’s better, because difference between Opera and FF is much less, than between FF and IE.
Pingback by A Modern Fable » S–L–O–W innerHTML? on 13 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ [...]
Comment by Steve on 13 September 2007:

@Luca, that depends on your system and background interference. On my system (Xeon 2.8GHz, 1GB RAM, WinXP), Opera 9.23 consistently runs the 15,000 element “destroy & create” test between 1.5 to 3.5 times faster with replaceHtml than with innerHTML. Note that if you run the test several times, generally only the fastest times are relevant (since averaging the cost of background interference is not very enlightening).

The numbers you posted don’t add up. The “destroy & create” test should not be much different than the length of the “destroy only” and “create only” tests added together. That looks like a clear case of background interference.
Trackback by ericsk's blog on 13 September 2007:

åŠ é€Ÿ Prototype.js ä¸çš„ Element.replace…

æ‹¾äººç‰™æƒ çš„ä¸€ç¯‡æ–‡ç« ã€‚
å‰›åœ¨å¤§ç¥žçš„éƒ¨è½æ ¼çœ‹åˆ°é€™ç¯‡æ–‡ç« ï¼Œæ˜¯èªªæœ‰äººå¯«äº†ä¸€å€‹ JavaScript function — replaceHTML ç”¨ä¾†å–ä»£åŽŸæœ¬ innerHTML çš„ç”¨æ³•ï¼Œæ ¹æ“šä»–çš„å¯¦é©—ï¼Œåœ¨ 15k å€‹ element çš„æƒ…æ³ä¸‹ï¼ˆcreate & d…
Comment by Steve Brewer on 13 September 2007:

Hey Steve,
The real trick is updating out of the DOM. You don’t need to create a new element – it’s just makes your life harder for no reason.

http://www.bigdumbdev.com/2007/09/…-put-back-is.html
Comment by Steve on 13 September 2007:

@Steve Brewer: As noted on Ajaxian, your currently posted test (which builds a single textNode consisting of the string â€œCONTENTâ€ repeated 15,000 times) is not remotely comparable. Your version is certainly faster than plain innerHTML, at least in Firefox, but it is not faster than replaceHtml (it is easily demonstrable that the “destroy” step is slower).
Pingback by Javascript-Channel.com / Avoiding .innerHTML slowdowns on 13 September 2007:

[...] that when clearing out existing code the DOM can be faster than .innerHTML? Take a look the article When innerHTML isn’t fast enough to see some impressive benchmarks and a simple [...]
Comment by Steve Brewer on 13 September 2007:

Hey Steve,
Didn’t escape my HTML when I posted on blogger – I used 15,000 spans.

You’re tests don’t show anything regarding innerHTML on a node that isn’t in the DOM. You’re method doesn’t have much if any performance gain over remove-update-replace; but it does have a big nasty side effect. For example, if you have event handlers bound to you node…
Comment by Steve on 13 September 2007:

“Didnâ€™t escape my HTML when I posted on blogger” –Steve Brewer

Gotcha, and I can see that in the updated post. Since on Ajaxian you asked me to demonstrate a difference, see here. At least on my system, withRemove() is consistently slower in each of the four big browsers. The difference isn’t as vast as with the comparison against simple use of innerHTML (although the “destroy only” test can be more than 10 times slower, and clearing elements is something I do regularly in RegexPal), but this was intended specifically to be as fast as possible when working with large numbers of elements/nodes.

Your approach is probably preferable for JavaScript frameworks and such since it has less potential for unexpected side effects. However, if you don’t have event listeners attached to the specific element you’re updating or have numerous variables referencing it, replaceHtml() still seems the preferable approach.

(BTW, since I’ve referenced the parallel discussion on Ajaxian several times, here’s a link for people who came here from elsewhere.)
Pingback by Federico Feroldi’s blog » Blog Archive » links for 2007-09-13 on 13 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ This post isn’t about the pros and cons of innerHTML vs. W3C DOM methods. (tags: article dhtml dom html javascript optimization performance innerhtml) Read More Post a Comment [...]
Pingback by links for 2007-09-13 | Cyberpunkç¶²éš›å›å®¢ on 13 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ (tags: javascript performance dom innerhtml optimization programming) [...]
Comment by Steve Brewer on 13 September 2007:

Hey Steve,
You demonstration is pretty conclusive. Like you said, both approaches are significantly faster than just innerHTML.
-Steve
Comment by Chris on 13 September 2007:

Quick & Easy Mootools implementation: http://p.caboo.se/96815
Pingback by napyfab:blog» Blog Archive » links for 2007-09-13 on 13 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ (tags: javascript performance innerhtml dom optimization programming web development) [...]
Pingback by replaceHTML, el innerHTML dopado | aNieto2K on 13 September 2007:

[...] Steven Levithan, lanza una mini aplicaciÃ³n en la que podemos probar el rendimiento de innerHTML, y mejorarlo con replaceHTML, una funciÃ³n que se encarga de mejorar el rendimiento de innerHTML, fusionandolo con un [...]
Pingback by Daily misery » Blog Archive » Links for 9.5.2007 through 9.13.2007 on 13 September 2007:

[...] When innerHTML isn’t Fast Enough… whoaaah whooaahhh [...]
Pingback by All in a days work… on 13 September 2007:

[...] When innerHTML isnâ€™t Fast Enough I’ll show how you can combine the use of innerHTML and DOM methods to make your code potentially hundreds of times faster than innerHTML on its own, when working with large numbers of elements…. 2 things I’d rather just stay away from. (tags: innerHTML DOM) [...]
Pingback by innerHTML - Ñ‚Ð¾Ñ€Ð¼Ð¾Ð· « Ðž PHP Ð¸ Ð¾ Ð¶Ð¸Ð·Ð½Ð¸… on 13 September 2007:

[...] Ð¾Ð¿Ð¸ÑÐ°Ð½Ð¸Ðµ [...]
Pingback by User First Web » links for 2007-09-14 on 14 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ Mixing DOM techniques with innerHTML because DOM is quicker at destroying elements and innerHTML is quicker at creating them. (tags: javascript ajax dom speedupyoursite) [...]
Comment by Thomas Peklak on 14 September 2007:

Just some tests in upcoming browsers. The script seems to perform really good in all of them. I’m pretty stunned how fast Opera is in comparison to the others. Firefox gets a real performance boost, the other browsers still get a remarkable speed boost.

Safari 3:
5000 elements…
innerHTML (destroy only): 63ms
innerHTML (create only): 390ms
innerHTML (destroy & create): 484ms
replaceHtml (destroy only): 47ms (1.3x faster)
replaceHtml (create only): 15ms (26.0x faster)
replaceHtml (destroy & create): 62ms (7.8x faster)
Done.
10000 elements…
innerHTML (destroy only): 110ms
innerHTML (create only): 3500ms
innerHTML (destroy & create): 4735ms
replaceHtml (destroy only): 110ms (~ same speed)
replaceHtml (create only): 31ms (112.9x faster)
replaceHtml (destroy & create): 141ms (33.6x faster)
Done.

Firefox 3:
5000 elements…
innerHTML (destroy only): 863ms
innerHTML (create only): 522ms
innerHTML (destroy & create): 1421ms
replaceHtml (destroy only): 20ms (43.1x faster)
replaceHtml (create only): 225ms (2.3x faster)
replaceHtml (destroy & create): 239ms (5.9x faster)
Done. 10000 elements…
innerHTML (destroy only): 5521ms
innerHTML (create only): 2626ms
innerHTML (destroy & create): 8528ms
replaceHtml (destroy only): 39ms (141.6x faster)
replaceHtml (create only): 373ms (7.0x faster)
replaceHtml (destroy & create): 422ms (20.2x faster)
Done.

Opera 9.5:
5000 elements…
innerHTML (destroy only): 16ms
innerHTML (create only): 141ms
innerHTML (destroy & create): 94ms
replaceHtml (destroy only): 16ms (~ same speed)
replaceHtml (create only): 78ms (1.8x faster)
replaceHtml (destroy & create): 125ms (1.3x slower)
Done.
10000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 312ms
replaceHtml (destroy only): 31ms (~ same speed)
replaceHtml (create only): 203ms (1.3x slower)
replaceHtml (destroy & create): 157ms (2.0x faster)
Done.
Pingback by benstraw.com » links for 2007-09-14 on 14 September 2007:

[...] When innerHTML isnâ€™t Fast Enough (tags: ajax code performance JavaScript) [...]
Trackback by theba.hu on 14 September 2007:

Amikor az innerHTML mÃ¡r nem elÃ©g gyors?…

Ã‰rdekes fÃ¼ggvÃ©nyt hozott nyilvÃ¡nossÃ¡gra Steve Levithan, a javascript DOM elemek lÃ©trehozÃ¡sÃ¡nak, Ã©s eltÃ¡volÃtÃ¡sÃ¡nak sebessÃ©gbeli problÃ©mÃ¡jÃ¡ra.

/* This is much faster than using (el.innerHTML = value) when there are many
existing descen…
Pingback by Sam’s Updates » Blog Archive » links for 2007-09-14 on 14 September 2007:

[...] When innerHTML isnâ€™t Fast Enoughâ€¦ (tags: javascript performance optimization innerhtml) [...]
Comment by DelfinoM on 14 September 2007:

My results with IE7

1000 elements…
innerHTML (destroy only): 0ms
innerHTML (create only): 0ms
innerHTML (destroy & create): 0ms
replaceHtml (destroy only): 0ms (~ same speed)
replaceHtml (create only): 0ms (~ same speed)
replaceHtml (destroy & create): 0ms (~ same speed)
Done.
——————————————————————————–
15000 elements…
innerHTML (destroy only): 31ms
innerHTML (create only): 156ms
innerHTML (destroy & create): 172ms
replaceHtml (destroy only): 32ms (~ same speed)
replaceHtml (create only): 157ms (~ same speed)
replaceHtml (destroy & create): 188ms (1.1x slower)
Done.
Comment by Steve on 14 September 2007:

@DelfinoM, no kidding. If you look at the code, you will see that for IE it simply uses innerHTML with no tricks, since that’s already the fastest approach in that browser.
Pingback by links for 2007-09-15 on 14 September 2007:

[...] When innerHTML isn’t Fast Enough Another way to replace / create HTML on the fly. (tags: DOM javascript) [...]
Pingback by innerHTML vs. replaceHTML : Fight! - Le tipi de Tothem on 15 September 2007:

[...] je ferai juste l’Ã©cho d’un article paru sur ajaxian.com qui reprend lui-mÃªme un autre article de blog et qui parle d’une mÃ©thode bien plus rapide de remplacement de contenu en HTML grÃ¢ce Ã [...]
Pingback by rascunho » Blog Archive » links for 2007-09-15 on 15 September 2007:

[...] When innerHTML isnâ€™t Fast Enough (tags: blog.stevenlevithan.com 2007 mes8 dia14 innerHTML desenvolvimento_web) [...]
Comment by K on 16 September 2007:

I consider this a bug in Firefox. There’s no reason why .innerHTML = “” shouldn’t be the fastest method, or at least comparable in speed.
Pingback by Tims Blog » Blog Archive » Writing on Notecards on 17 September 2007:

[...] when innerHTML isn’t fast enough [...]
Pingback by links for 2007-09-17 | The Marketing Technology Blog on 17 September 2007:

[...] When innerHTML isnâ€™t Fast Enough I’ll show how you can combine the use of innerHTML and DOM methods to make your code potentially hundreds of times faster than innerHTML on its own, when working with large numbers of elements. (tags: javascript performance innerHTML DOM optimization programming web) [...]
Pingback by Bram.us » When innerHTML isnâ€™t Fast Enough on 19 September 2007:

[...] times faster than innerHTML on its own, when working with large numbers of elements.” Where? There! Spread the [...]
Pingback by Vysnu » links for 2007-09-21 on 20 September 2007:

[...] When innerHTML isnâ€™t Fast Enough (tags: javascript performance innerhtml optimization) [...]
Comment by Tom on 3 October 2007:

Do you think this idea is worth submitting as a patch to Prototype? It seems like Element.Update could benefit from this technique.
Comment by Wahoo on 5 October 2007:

Thank you for sharing!
Comment by Carsten on 19 October 2007:

I found an interesting thing: If you put the elements in one single element, the destroying of the elements work with innerHTML nearly at same speed as replaceChild. It seems that Firefox with innerHTML destroys every direct child Element separate and not as a block.
Comment by Steve on 19 October 2007:

@Carsten, yeah, I’ve noticed the same thing. See the discussion on Ajaxian.
Comment by J. Random Hacker on 2 December 2007:

Once again it’s proved that JavaScript optimization is as obscure and misleading as it gets… Great tip, thanks!
Pingback by Wenn innerHTML nicht schnell genug ist | trafex on 10 January 2008:

[...] Levithan stellt in seinem Blog mit replaceHTML eine JavaScript-Funktion vor, welche diese Aufgabe schneller erledigen [...]
Pingback by Javascript Tools (2007-01-19) « K-Man’s Weblog on 19 January 2008:

[...] When innerHTML isnâ€™t Fast Enough – http://blog.stevenlevithan.com/archives/faster-than-innerhtml [...]
Comment by John on 20 February 2008:

So, what do you do when ReplaceHtml() isn’t fast enough?

Well, maybe that means that JavaScript isn’t the way to do it, but I have a generic query form/javascript, that I use for generating various reports, and I’d like to be able to refresh the reports, based on the user selections in the query form, without having to repopulate all the form selects (each one is at least a simple query and there may be many of them depending on which ones a report uses, and the report queries are quite complex, so any time savings anywhere is a benefit).

Generally this works fine, but, depending on the user selections in the query form, the number of rows in the report can become quite large (and I’d like to avoid paging for a number of reasons), and, at some undetermined threshold, the performance replacing the innerHTML of the report table just completely tanks and Firefox, at least, will hang for 5-10 minutes on this line:

oldEl.parentNode.replaceChild(newEl, oldEl);

The innerHTML of oldEl is at this point quite small, just a handful of rows displaying progress information, so I suspect that the time is mostly spent on re-building, -rendering newEl (a table). (And, just setting the innerHTML of oldEl is just as slow as using ReplaceHtml() to do it.) Right now I’ve simply disabled the JavaScript refresh on the reports where this is a possible problem.

Any ideas or suggestions on workarounds to get acceptable performance?
Comment by Ole Clausen on 27 February 2008:

You should be aware that the performance of DOM and innerHTML depends on many things – i.e. the amount of data appended to the elements. Unfortunately the site is in Danish, but I have tried to look a little deeper in the myth of innerHTML’s speed:
http://www.dengodekode.dk/artikler/DOM/no_innerhtml.php#innerhtml_performance

In the first of two tests I inserted 2000 element structures like this:
<p><strong>5 characters</strong></p>
<div>5 characters<span>5 characters</span>3 characters</div>
<em>4 characters</em>

I tested four different methods in IE and Firefox:
*) innerHTML with string concatenation
*) innerHTML with an array of elements, joined at the end of the script
*) DOM – creating single elements in every iteration of the loop
*) DOM – cloning a template

In this test innerHTML was by far the fastest. In IE the string-concat method was quite slow – but still faster than DOM.

The same tests were done with 500 structures like this:
<p><strong>777 characters</strong></p>
<div>1627 characters<span>1262 characters</span>98 characters</div>
<em>339 characters</em>

This time the picture was quite different:
In Firefox DOM was 10-15 times faster than innerHTML!
In IE DOM was 10 times faster than innerHTML with string-concat
- but half as fast as innerHTML with a joined array

Werner Heisenberg once said something like:
“What we observe is not nature in itself but nature exposed to our method of questioning”

- it seems to go quite well with webcode too ;o)

/best regards
Comment by Jurik on 17 March 2008:

FireFox & innerHTML

How many chars were you able to write into an element with innerHTML? On other browsers it works quite well, but firefox seems to have trouble to write more then 4100 characters with innerHTML=.
Comment by Ole Clausen on 19 March 2008:

Hehe … Firefox is f****ed in many ways – although it’s highly politically incorrect to say so ;o)
You can i.e. clone the whole documentElement and append it to a meta element in the head! Or how about cloning (or building it in DOM) a table – appending it to an option element – and get it rendered in the select element with images, form elements and all …?!??!!! Often the innerHTML will not tell you the trouth about what really has happended, but if you check the DOM, you will experience strange scenes before og your very eyes! =8-O

Firefox divides the innerHTML string into chunks of 4096 – and puts these chunks into text nodes when inserting with innerHTML. Try this code:

function foo() {
var ss = “”, s = “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec venenatis lectus quis lectus”;
while (ss.length<90000) {
ss += s;
}
gE(“fooBar”).innerHTML = ss;
alert(“Number of text-nodes: ” + gE(“fooBar”).childNodes.length)
alert(“Length of first text-node: ” + gE(“fooBar”).firstChild.nodeValue.length)
alert(“Length of innerHTML: ” + gE(“fooBar”).innerHTML.length)
}
function bar() {
var ss = “”, s = “Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec venenatis lectus quis lectus”;
while (ss.length<90000) {
ss += s;
}
gE(“fooBar”).appendChild( document.createTextNode(ss) );
alert(“Number of text-nodes: ” + gE(“fooBar”).childNodes.length)
alert(“Length of first text-node: ” + gE(“fooBar”).firstChild.nodeValue.length)
alert(“Length of innerHTML: ” + gE(“fooBar”).innerHTML.length)
}

Test foo
Test bar

NB: Reload the page between testing ‘foo’ and ‘bar’
Comment by Ole Clausen on 19 March 2008:

Sorry! I have some JS-wrappers in my editor’s HTML-template – and I used one of them in the example above:

var d=document;
function gE(id){return d.getElementById(id)};
Comment by Ole Clausen on 19 March 2008:

- and forgot HTML-escaping :o|

<button onclick=”foo()”>Test foo</button>
<button onclick=”bar()”>Test bar</button>

<div id=”fooBar”></div>
Comment by Diana on 25 March 2008:

I chanced upon the site and being an airhead, I have no ideas what you guys are talking about but it is quite interesting to see such passion you guys have for the topic on hand. Keep it up (so to keep like-minded friend of mine alive)!
Comment by Mike on 12 June 2008:

So, does replaceHtml leak memory if event handlers are attached to the node or its children? Just in IE? Or is the method merely slower if event handlers are present?

(This question is in reference to Steve Brewer’s “but it does have a big nasty side effect. For example, if you have event handlers bound to you node…” comment. I’m not clear on what that means.)

Thanks!
Pingback by Whoila Blog » Blog Archive » Using DOM with innerHTML on 7 October 2008:

[...] When innerHTML isnâ€™t Fast Enough has technique on using innerHTML in combination with DOM to improve speed for rendering in browsers. [...]
Pingback by jQuery html() optimieren - XHTMLforum on 14 November 2008:

[...] html() optimieren Hallo, ich möchte gerne die jQuery html() Funktion, wie hier beschrieben optimiren. Hier mein aktueller Versuch: [...]
Pingback by Writing better javascript - Part 3 « Vish’s ramblings on 18 November 2008:

[...] Check out the benchmarks on the performance benefits of using the ‘innerHTML’ property over the DOM manipulation methods here at QuirksMode. If you are a bigger stickler for performance and the gains from using ‘innerHTML’ doesn’t satisfy you, then you might consider using the ‘replaceHTML’ function below as per the suggestions posted here. [...]
Comment by Paul on 24 February 2009:

looks good… one question… what licence is this released under? can I include it in a GPLv3 project?
Comment by Steven Levithan on 26 February 2009:

@Paul, it’s released under the MIT license, and yes it’s compatible with GPLv3.
Comment by caii on 9 April 2009:

fn=function (){……}
el.addEventListener(‘click’,fn , false);
replaceHtml(el,html);

when click on e1,fn can’t work,
fix it
Comment by Andre on 28 July 2009:

Verifique a posiÃ§Ã£o do form, se o mesmo nÃ£o estÃ¡ dentro de uma tabela
Comment by jag on 31 July 2009:

Hi, wont be another a**hole that tells you your code sucks and my approach is better than yours.

I just like to thank you for sharing such a great code! This is so cool!!!!Yebah!
Pingback by Browser detection is still useful | Karmagination on 31 July 2009:

[...] benchmark results are here. Both of the code snippets are cross-browser compatible. The Gecko engine runs faster using method [...]
Comment by jag on 31 July 2009:

BTW, i visited “The Big Dumb Developer” and tested his workaround and found out how sucky the solution was that was supposed to, as said to be-”better.” I’d say F*** off dude! again, Kudos for this post! (:
Comment by Hello Kitty on 28 August 2009:

em… how about enclose the new HTML message with another node, then assign to innerHTML?
i.g.
node.innerHTML = +message+ ?
This may reduce the time FF need to clean up the things?
Comment by Hello Kitty on 28 August 2009:

node.innerHTML = <span>,+message+</span> ?
Comment by ÐŸÐ°Ð²ÐµÐ» Ð¥Ð¾Ñ…Ð¾Ð»Ð¸Ð½ on 9 October 2009:

Ð ÐºÑ€ÑÐº Ð¾Ñ‚ Ð²ÑÐµÐ³Ð¾ ÑÑ‚Ð¾Ð³Ð¾ ÑÑ‡Ð°ÑÑ‚ÑŒÑ ÐµÑÑ‚ÑŒ Ñƒ ÐºÐ¾Ð³Ð¾? Ð˜Ð»Ð¸ Ñ Ñ‡Ñ‚Ð¾-Ñ‚Ð¾ ÑÐ¾Ð²ÑÐµÐ¼ Ð½Ðµ Ð´Ð¾Ð³Ð½Ð°Ð»?
Pingback by å…³äºŽç§»é™¤DOMèŠ‚ç‚¹ « å…³äºŽwebé‡æž„çš„é‡æž„ on 11 October 2009:

[...] 5ã€é’ˆå¯¹innerHTMLæ¯”ç›´æŽ¥DOMæ“ä½œï¼ˆremoveChildï¼‰å¿«çš„è§‚ç‚¹ï¼Œå›½å¤–çš„ä¸€ä¸ªåšå®¢ï¼ˆWhen innerHTML isnâ€™t Fast Enoughï¼‰æå‡ºäº†ä¸åŒçš„è§‚ç‚¹ï¼Œè¿™ä¸ªè§‚ç‚¹åŸºäºŽå¤§é‡çš„èŠ‚ç‚¹åŸºç¡€ä¸Šï¼Œå¹¶ä¸”ä½œè€…æå‡ºäº†è§£å†³çš„æ–¹æ¡ˆï¼Œé‡‡ç”¨replaceChild [...]
Comment by Najib on 5 March 2010:

great solution. i´m using it and it improved my divs load performance.

thx.
Comment by bernhold on 25 March 2010:

c00l
Comment by dgatwood on 17 April 2010:

Tried this today as an attempt to improve FireFox innerHTML performance on a page that takes over a minute to load (versus only 20 seconds in Safari), but no joy. Performance of replaceChild was identical to innerHTML (or at least within the ~1 second margin of error) in both Safari 4.0.5 and FF 3.6. Maybe it’s still useful for older browsers, but I sure do with FireFox’s innerHTML performance wasn’t so awful.

Apparently the best I can do is disable incremental loading/display in FireFox. *sigh* If anybody has any better suggestions (that don’t involve chunking and parsing the HTML in JavaScript), I’d love to hear them.
Comment by dgatwood on 17 April 2010:

Err.. I sure do wish FF’s innerHTML performance weren’t so awful. Gotta watch the typos.
Comment by dgatwood on 17 April 2010:

I spoke too soon. My code was getting bounded by FireFox’s awful string length performance on the XMLHttpRequest’s contentText. That performance hit so completely overshadowed the innerHTML performance that I have no idea whether this helped or not…. *grrrr*
Comment by Samir on 22 April 2010:

Thank you for sharing your code, how can I change the code below to use your code instead. It is very slow loading with IE when the text is so large > 15 pages, though it is much faster in firefox.

Thanks

var v;
for (var i=sseq;i<=eseq;++i){
v=i-t;ttext[0].innerHTML+=" “+etext[i]+” “+” (” +””+v+”)” +”\u00A0″+” “;
}
Comment by Lucian Yao on 30 April 2010:

Great!!
I was just in this sort of trouble, your code improved the speed of my website significantly and saved my ass!!
Thank you!!
Comment by Sanek on 18 May 2010:

??????, ?????????? ???????
Comment by alconavt on 18 May 2010:

?????? ??????? ?????????????, ??????? ???? ? ?????????.
Comment by dreamweb on 11 July 2010:

its great – thank you
Comment by Joprea on 11 July 2010:

?????????????? ????????????, ?? ?????? ?????? ??? ??????????, ??? ??????? ??? ?? ???????? ???. ??? ?????? ?? ???? ?????? ???????? -
Pingback by Startup Dreams » Blog Archive » Faster than inner.HTML: Quick fixes with replaceHtml() - Living, Learning and Coding on 3 August 2010:

[...] implementation of replaceHtml(), a javascript alternative to the innerHTML which can be found here. Both innerHTML and replaceHtml() are way faster than DOM methods when it comes to inserting [...]
Pingback by ????? innerHTML ????? ! | Mouse.z on 13 August 2010:

[...] http://blog.stevenlevithan.com/archives/faster-than-innerhtml 1000 elements… innerHTML (destroy only): 156ms innerHTML (create only): 15ms innerHTML (destroy [...]
Pingback by thinking in website @ Technology Memo For Computer on 30 August 2010:

[...] ???????????????????, ????? Firefox ??. ?????? @cc_on. When innerHTML isn’t Fast Enough [...]
Pingback by ??Firefox?innerHTML()??? - ??????? on 6 September 2010:

[...] ?When innerHTML isn’t Fast Enough? ?innerHTML and DOM Methods? ???? ??????QQ?? | Google?? | ???? | ??? | ?? | ??? | Yahoo?? | ??ViVi | ???????????????????? http://www.js8.in/607.html. ??????? JS8.IN ™ 2010?9?5? ???? ?????? JavaScript, ???? javascript, ???? ?? > JavaScript, ???? > ??Firefox?innerHTML()??? [...]
Comment by Admin on 21 September 2010:

??? ??????, ????? ?????? ?????.
Comment by Al on 10 October 2010:

Thanks! It really speed up loading on firefox while using dhtml on big object.

Very good job!

Beer for you! ^^
Comment by Rick on 11 November 2010:

I noticed no performance improvements over a series of HUGE html inserts. Apparently it became like 1% slower with this – but at least I could isolate the HTML changing part of my code to profile on Firebug
Pingback by JavaScript?????? – on 18 November 2010:

[...] When innerHTML isn’t Fast Enough ??????????HTML???DOM?innerHTML????document.createElement?????????????????innerHTML?????? [...]
Comment by Dan Beam on 25 March 2011:

By the way, this would be *even faster* if you simply assign the function once based on the conditional compilation being present or not, like so:

// for everybody except IE
function replaceHtml(el, html) {
var oldEl = typeof el === “string” ? document.getElementById(el) : el;
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;
};

// Pure innerHTML is slightly faster in IE, so change the function
/*@cc_on
function replaceHtml(el, html) {
var oldEl = typeof el === “string” ? document.getElementById(el) : el;
oldEl.innerHTML = html;
return oldEl;
}
@*/

https://gist.github.com/887592 (in case my text is messed up)
Pingback by 10 jQuery HTML Plugins | jQuery4u on 5 September 2011:

[...] This plug-in is a simple port based on Steven Levithan’s replaceHtml function, designed to speed up the native innerHTML Javascript assignment property and as a replacement for jQuery’s html() function. Source [...]
Comment by tigres uanl y la mejor aficion del futbol mexicano on 4 November 2011:

What i do not realize is in reality how you’re now not actually a lot more well-appreciated than you might be right now. You are so intelligent. You understand therefore significantly in terms of this topic, made me in my view imagine it from a lot of varied angles. Its like men and women aren’t interested unless it is something to accomplish with Girl gaga! Your own stuffs excellent. Always take care of it up!
Comment by Julien Kronegg on 26 January 2012:

Replacing the element may cause some problems since existing javascript objects may refer to the replaced object. This will cause two kind of problems because the old and new elements will be referenced: 1) incoherence 2) memory leak.

I prefer “The Big Dump Developer” solution which avoids the incoherence and memory leak.
Comment by PherricOxide on 11 July 2012:

Doesn’t seem to have any effect on Firefox anymore, but it still has huge speed boosts in Chrome 18. I was using innerHTML to push a very large table (500+ rows, 15 columns). It went from 70ms to 40ms using the replaceHTML function.
Comment by Neil Green on 27 October 2012:

Very nice technique. I utilized it in my FastDomSorter project for a big performance boost: https://github.com/ngreen77/FastDomSorter
Comment by anmyas on 25 December 2013:

?????????? ?????? ???????? ??????? ??????? Moss. ??????? ????????, ????????.
Comment by anmyas on 14 January 2014:

?????????? ?????? ???????? ??????? ??????? Moss. ??????? ????????, ????????.
Comment by Ð¿Ð¾Ñ‡Ñ‚Ð° on 13 February 2014:

Hi there! I know this is kind of off topic but I was wondering if you knew where I could get a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having trouble finding
one? Thanks a lot!
Comment by Joe D on 3 May 2014:

Absolutely awesome. Been needing this solution for a long time. Bravo. The performance gain is so great.
Comment by Norbert on 14 May 2014:

I ran all the tests in Chrome. They are the same for both. For fewer elements, the innerHTML is faster sometimes by 1-2 ms, for 10k and 14k, replaceHTML is faster by 3-4 ms.

Also, good to see how browsers improved in 7 years. My results for 15K in Chrome:

15000 elements…
innerHTML (destroy only): 34ms
innerHTML (create only): 18ms
innerHTML (destroy & create): 55ms
replaceHtml (destroy only): 34ms (~ same speed)
replaceHtml (create only): 18ms (~ same speed)
replaceHtml (destroy & create): 51ms (~ same speed)
Done.

Flagrant Badassery

When innerHTML isn’t Fast Enough

The code:

innerHTML is already pretty fast...is this really warranted?

Related Posts

There Are 97 Responses So Far. »

Post a Response

Search

Tags

Archives

Categories

Categories

Recent Posts

Recent Comments

Links

Blogs I Read