Jump to content

Innerhtml Vs Dom Methods


Ingolme

Recommended Posts

Normally I've taken for granted what most of the experts on the forum say. I developed a small script that reads BMP files and renders them. I though it was a little slow, so I decided I'd switch creating pixels through createElement() to writing the HTML with innerHTML, since I had heard from people on this forum that innerHTML was actually faster than DOM methods.Apparently, my assumption was quite wrong, my program is at least 20 times slower when using innerHTML to add new "pixels" to the box.Here's the example using DOM methods, it may take a few seconds to load:http://dtfox-tests.totalh.com/bitmap/For the following example, click at your own risk, it will probably freeze your browser if it doesn't stop slow scripts like Firefox does:http://dtfox-tests.totalh.com/bitmap/index2.html

Link to comment
Share on other sites

I have not run a benchmark for the last several versions of FF. I've always believed that eventually DOM methods would be faster. Maybe that time has come.On the other hand, my benchmark tests have not involved so many inline style elements. I realize that changing style with el.style is theoretically the same as changing the inline style element; I wonder if that's also the case for document fragments.I'm also inclined to think it would be better practice to concatenate a single string without adding it to the innerHTML until after your nested loops have finished -- but that would change the conditions of the benchmark comparison.I'm stumped. :)BTW, aren't you one of the board experts?

Link to comment
Share on other sites

The conditions for both methods are the same: I'm adding one element to the document upon each iteration, so it should be a fair comparison of whether or not innerHTML is faster than the DOM methods.I've set up another test where innerHTML is only modified once, after every single "pixel" has been appended to another string. That one seems to run quite smoothly.http://dtfox-tests.totalh.com/bitmap/index3.html?I guess the conclusion I can get from this is that for creating individual nodes, DOM methods are faster, but if you want to update a whole lot at once, innerHTML is faster as long as you create the whole HTML string before modifying the innerHTML property.Notice: I've only developed this for Firefox. Opera seems to go very slow and Internet Explorer has errors.

Link to comment
Share on other sites

Are performance details documented "officially" somewhere? i.e. by browsers. Should performance be analyzed on a browser-by-browser way?Does some committee, W3C, or any other make recommendations on performance?
Sorry for the double-post.Performance isn't currently part of web standards, but when developing web applications it's important to keep it in mind so that you can develop your applications to be most efficient. Performance depends on how the browser vendor decided to implement the functions or features when they developed their Javascript engine, so the W3C can't put any rules on it.
Link to comment
Share on other sites

The conditions for both methods are the same: I'm adding one element to the document upon each iteration, so it should be a fair comparison of whether or not innerHTML is faster than the DOM methods.
That's what I meant after my suggestion to concatenate the string before adding it to the innerHTML. Doing THAT would change the conditions of the test. Your test is fair. That's one of the reasons I'm stumped.The technique is worth trying if you want to discover the fastest way to get there, though.@just2commentPerformance standards especially wouldn't make sense when you consider all the different processors and processor speeds out there.W3C leaves most of the internal details up to the vendors. That's true of HTML, scripting, and CSS. It mostly describes developer API and user experience. Not how the browser gets there. This is a reason why IE typically has a lot of memory leaks. I don't think there is a spec on garbage collection, though maybe there should be.
Link to comment
Share on other sites

I guess the conclusion I can get from this is that for creating individual nodes, DOM methods are faster, but if you want to update a whole lot at once, innerHTML is faster as long as you create the whole HTML string before modifying the innerHTML property.
That's the same conclusion I've reached before too. Many posters here generate many elements at once, so that's why we usually reccomend using innerHTML - it's good for most cases. Of course, every rule has its exception, but once newbies get competent enough to do the kind of benchmarks that you (and others) are doing, they'll likely also have the skill to use some kind of a profiler to verify any kind of a performance test.
Link to comment
Share on other sites

I've seen various techniques at doing that (e.g.), but they're always fairly inefficient. It's interesting to do in theory, but in practice there's not much use for it. Other than the time like you've seen, it also increases the size required for the image by several times. I've seen some tools that convert an image to an HTML table, and the image size would go from a couple bytes per pixel up to around 20 bytes per pixel, so you end up with a lot of markup to represent even a small image.

Link to comment
Share on other sites

I suppose innerHTML just has a higher overhead for each time you call it... but it would be still faster calling it once than calling createElement several times.While performance isn't part of any standard, there have been several attempts to set a baseline level of performance that browsers should attain, for example with the Acid3 test, which not only tests for compliance but also requires that "the animation has to be smooth"[1].

Link to comment
Share on other sites

I suppose innerHTML just has a higher overhead for each time you call it
Each time innerHTML gets modified the elements on the page get re-rendered. So modifying innerHTML in a loop has the effect of requiring the browser to re-render the page every time through the loop instead of doing the whole thing at once.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...