问题描述:

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/

相关阅读:
Top