当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Optimizing ng-repeat tilemap

问题描述:

I am creating an mapeditor web application like tiled

My ng-repeat looks like this:

<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>

It happens to be verry slow rendering and editing when using maps bigger than 50 by 50 tiles.

This means you will have 50 x 50 = 2500 * 2(layers) = 5,000 tiles/divs. And more if there are more bottom images or top images stacked.

Things I tried:

  • Replacing {{bind}} with ng-* attributes
  • Using current scope variables x or y variable instead of the $scope variable mapDisplayerImages[y] and [y][x]

Are there more things I can do to optimize the mapeditor?

网友答案:

You might need to thing about integrating ReactJS in your project.

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

分享给朋友:
您可能感兴趣的文章:
随机阅读: