Какой самый быстрый способ рисовать в HTML5 - PullRequest
Новая
       16

Какой самый быстрый способ рисовать в HTML5

1 голос
/ 11 сентября 2011

Я рисую экран в Интернете, используя JavaScript, CSS и HTML, используя цикл for для итерации по ширине и высоте экрана с интервалами 16X16.Вот как мой цикл выглядит в настоящее время: 

{
        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]];
                }
            }
        }
    }

Есть ли более быстрый способ вывести все эти плитки на экран, используя холст или некоторые функции в javascript или смесь javascript и css?

1 Ответ

3 голосов
/ 11 сентября 2011

Таким образом вы создаете слишком много событий перекомпоновки / макета. Так как вы удаляете все элементы, а затем добавляете их снова (и то, и другое дорого), вместо этого просто добавьте все элементы div один раз, и, поскольку они всегда в том же порядке, просто обновите существующие.

Также, чтобы быстро очистить div, выполните div.innerHTML = '';. Если вы добавляете много элементов, добавьте их в фиктивный div и затем присоедините фиктивный div к div, фактически подключенному к DOM (например, к тому, который вы можете запросить с помощью функций document.getElement ???).

В 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);
    }
}

В рендере: 

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]];
        }
    }
}
...