Question

我使用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的混合，是否有更快的方法将所有这些图块绘制到屏幕上？

Answer 1

通过这种方式处理，您正在创建过多的回流/布局事件。由于您删除了所有项目然后再次添加它们（这两者都很昂贵），而只是添加所有div一次，因为它们总是处于相同的顺序，只需更新现有的。

另外，要快速清除div，请执行div.innerHTML = '';。如果追加大量项目，将它们添加到虚拟div中，然后将虚拟div附加到实际附加到DOM的div（例如，可以使用document.getElement ???函数查询的div）。

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

在HTML5中绘制的最快方法是什么

1 个答案: