HTML5로 그릴 수있는 가장 빠른 방법은 무엇입니까

Question

나는 for 루프를 사용하여 16X16 간격으로 화면 너비와 높이를 반복하여 자바 스크립트, CSS 및 HTML을 사용하여 웹 화면을 그립니다. 캔버스 또는 기능의 일부 자바 스크립트 또는 자바 스크립트와 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를 빠르게 지우려면 div.innerHTML = '';을 수행하십시오. 많은 항목을 추가하는 경우 더미 div에 추가 한 다음 더미 div를 실제로 DOM에 연결된 div에 연결하십시오 (예 : document.getElement ??? functions를 사용하여 쿼리 할 수있는 항목). 초기화에서

:

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