What is the fastest way to draw in HTML5

Question

I am drawing a screen to the web using javascript, CSS, and HTML by using a for loop to iterate through the screen width and heights in intervals of 16X16. Here is what my loop currently looks like:

{
        div = document.getElementById('mainView');
        while (div.children.length > 0)
            div.removeChild(div.children[0]);

        for (y = this.y; y < this.y + this.height; ++y)
        {
            for (x = this.x; x < this.x + this.width; ++x)
            {
                toAppend = document.createElement('div');
                viewCoords = this.convertWorldToView(x, y);
                toAppend.style.top = viewCoords[1] * 16 + 'px';
                toAppend.style.left = viewCoords[0] * 16 + 'px';
                mainViewDiv.appendChild(toAppend);
                if (fullMap[y][x] == TILE_WATER)
                {
                    startTile = Math.round(Math.random() * 3) + 1;
                    toAppend.className = "Water" + startTile + "Tile";
                }
                else
                {
                    toAppend.className = typeClassDecoder[fullMap[y][x]];
                }
            }
        }
    }

Is there a faster way to draw all these tiles to the screen using either canvas or some of function in javascript or a blend of javascript and css?

Answer 1

You are creating an excessive amount of reflow/layout events by doing things this way. Since you remove all the items and then add them again (both expensive the way you're doing them), instead just add all the divs once, and since they're always in the same order, just update the existing ones.

Also, to clear a div quickly, do div.innerHTML = ''; . If appending lots of items, add them to a dummy div and then attach the dummy div to a div actually attached to the DOM (eg, one that you can query using document.getElement??? functions).

In init:

div = document.getElementById('mainView');
for (y = this.y; y < this.y + this.height; ++y)
{
    for (x = this.x; x < this.x + this.width; ++x)
    {
        toAppend = document.createElement('div');
        viewCoords = this.convertWorldToView(x, y);
        toAppend.style.top = viewCoords[1] * 16 + 'px';
        toAppend.style.left = viewCoords[0] * 16 + 'px';
        mainViewDiv.appendChild(toAppend);
    }
}

In render:

div = document.getElementById('mainView');
var i = 0;

for (y = this.y; y < this.y + this.height; ++y)
{
    for (x = this.x; x < this.x + this.width; ++x)
    {
        toAppend = div.children[i++];
        if (fullMap[y][x] == TILE_WATER)
        {
            startTile = Math.round(Math.random() * 3) + 1;
            toAppend.className = "Water" + startTile + "Tile";
        }
        else
        {
            toAppend.className = typeClassDecoder[fullMap[y][x]];
        }
    }
}