1

forループを使用して画面の幅と高さを16X16の間隔で反復処理することにより、javascript、CSS、およびHTMLを使用してWebに画面を描画しています。私のループが現在どのように見えるかは次のとおりです。

{
        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 のブレンドを使用して、これらすべてのタイルを画面に描画するより高速な方法はありますか?

4

1 に答える 1

3

このようにすることで、過剰な量のリフロー/レイアウト イベントを作成しています。すべてのアイテムを削除してから再度追加するので (どちらもコストがかかります)、代わりにすべての div を一度追加し、それらは常に同じ順序であるため、既存のものを更新するだけです。

また、div をすばやくクリアするには、 を実行しますdiv.innerHTML = '';。多数のアイテムを追加する場合は、それらをダミーの div に追加してから、ダミーの div を実際に DOM に接続されている div (たとえば、document.getElement??? 関数を使用してクエリできるもの) に接続します。

初期設定:

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]];
        }
    }
}
于 2011-09-11T07:21:48.723 に答える