Jump to content
  • Advertisement
Sign in to follow this  
Kirl

[web] optimising innerHTML?

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

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
Share on other sites
Advertisement
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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"));

Share this post


Link to post
Share on other sites
Firefox is in fact slightly faster using firstChild.data! :)

Thanks for the suggestion!

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!