HTML5で描画する最も速い方法は何ですか

Question

私はjavascript、CSS、HTMLを使って画面を描画しています。forループを使用して画面幅と高さを16X16の間隔で繰り返します。キャンバスや機能のいくつかのJavaScriptやJavaScriptとCSSのブレンドのいずれかを使用して画面にすべてのこれらのタイルを描画するためのより高速な方法はあり

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

：ここに私のループは、現在のように見える何ですか？

Answer 1

このようにして、過剰な量のリフロー/レイアウトイベントを作成しています。すべてのアイテムを削除してから再度追加します（どちらも費用がかかります）。すべてのアイテムを一度追加するだけです。常に同じ順序になっているため、既存のアイテムを更新してください。

また、divをすばやくクリアするには、div.innerHTML = '';を実行します。多くのアイテムを追加する場合は、それらをダミーdivに追加してから、ダミーdivを実際にDOMに接続されたdivに追加します（たとえば、document.getElement ??? functionsを使用してクエリを実行することができます）。 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]]; 
     } 
    } 
}