최적화 겨 반복 tilemap

Question

내가 tiled

내 NG 반복 같은 mapeditor 웹 응용 프로그램을 만드는 오전은 다음과 같습니다

<div class="mapContainer unselectable" ng-class="{hideBordersFromMapContainer:hideBorders}"> 
    <div ng-repeat="y in mapDisplayerImages" class="tilegroup" ng-style="{'width':(y.length * 32)+1}"> 
     <div 
      ng-repeat="x in y" 
      class="tile" 
      ng-mouseover="onMouseOver({'y':$parent.$index,'x':$index})" 
      ng-mousedown="drawOrSelectTile({'y':$parent.$index,'x':$index},true);onMouseDown({'y':$parent.$index,'x':$index});" 
      ng-mouseup="onMouseUp({'y':$parent.$index,'x':$index});" 
      ng-class="{selectedTile: x.active}" 
     > 
      <div 
       ng-repeat="image in x.bi" {# ng-repeat bottom images #} 
       class="tileImage" 
       ng-style="{'background':image}" 
      > 
      </div> 
      <div 
       ng-repeat="image in x.ti" {# ng-repeat top images #} 
       class="tileImage" 
       ng-style="{'background':image}" 
      > 
      </div> 
      <div 
      class="tileImage" 
      > 
      </div> 
     </div> 
    </div> 
</div> 

보다 큰지도를 사용할 때의 verry 느린 렌더링 및 편집 될 일이 50 by 50 tiles.

즉, 50 x 50 = 2500 * 2 (레이어) = 5,000 타일/div가됩니다. 더 많은 하단 이미지 또는 상단 이미지가 겹쳐지면 더 많아집니다.

것들 I 시도 :

• 는 {{바인드}} ng-와 *이 전류 범위 변수 X 또는 대신 $ 범위 변수 mapDisplayerImages [Y]와 [Y]의 Y 변수를 사용
• 특성 교체 [x]

지도 작성기를 최적화하기 위해 할 수있는 일이 많이 있습니까?

Answer 1

프로젝트에 ReactJS를 통합하는 것이 필요할 수 있습니다.

http://www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs/