Question

我正在创建一个像tiled

这样的mapeditor网络应用程序

我的ng-repeat看起来像这样：

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

当使用大于50 by 50 tiles的地图时，恰好是慢速渲染和编辑。

这意味着您将拥有50 x 50 = 2500 * 2（图层）= 5,000个图块/ div。如果有更多底部图像或顶部图像堆叠，则更多。

我尝试的事情：

用ng- *属性替换{{bind}}
使用当前范围变量x或y变量而不是$ scope变量mapDisplayerImages [y]和[y] [x]

我可以做更多的事情来优化mapeditor吗？

Answer 1

您可能需要在项目中集成ReactJS。

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

优化ng-repeat tilemap

1 个答案: