• 12
• 12
• 9
• 10
• 13

[web] optimising innerHTML?

This topic is 3509 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

Recommended Posts

I've been trying to optimise performance of my js snake game and it turns out one simple but critical line of code is responsible for most of the slowdown. It's the line that writes the length to the span elements for each snake. When the snake eats a red square (apple) the span element(s) is/are updated:
Quote:
 snake.output.innerHTML = snake.cells.length;
The span element was placed inside each snake object at creation:
Quote:
 snake = new Object(); snake.output = document.getElementById("p1Out"); // span element
It can be a problem on slower systems when multiple reds are eaten in a row (clusters of reds usually form) or in a mode where the snakes grow at every movement interval (also updating at every interval). I added a bit of the code because it possibly had something to do with it, I never expected this little line could be so slow.

Share on other sites
InnerHTML has to parse the data and potentially build extra DOM elements. It presumably also has to convert that number to an appropriate string first.

For plain text you might get better results with the textContent property or something like that.

Share on other sites
Unfortunatly textContent isn't supported by IE, but you said "or something like it", are there anymore somethings like it?

I only found the text property but it isn't very well supported either. :(
Thanks for the suggestion though.

More innerHTML alternatives very welcome!

Share on other sites
How about the *proper* alternative? innerHTML is not as far as I know, standard. It's an IE extension that most browser have adopted for compatibility.

The proper way to do it is to build the DOM yourself.
document.createElement('span') and so on.

I don't know whether this would be faster or slower, but at least, it'd be correct. ;)

Also remember that javascript performance varies wildly between browsers. So if you're worried about performance, make sure to test it in more than just IE.

Share on other sites
What makes you think I didn't write the span elements 'properly'? I placed the span elements with the exact DOM methods you just suggested and I'm testing with IE, FF and Opera, if something is not supported by any of them I try to look for a cross-browser alternative.

Currently innerHTML is the only cross browser option I can find. So what would you say is the proper DOM method for writing text to a span element?

Share on other sites
You can add a text node to the span

var node = document.createTextNode("some text");span.appendChild(node);

Of course, this will append the new text if the span already has another text node. You can simply replace the old text node like this (assumed the span only contains text and nothing else):

if(span.firstChild) span.firstChild.data = "some text";else span.appendChild(document.createTextNode("some text"));