Question

我正在基于以下格式的数组在Angular模板中生成SVG图：

[{x: 0, y: 1}, {x: 1, y: 2}, ...] - 数组将包含数千个点。

虽然我可以快速呈现包含数千个点的<path>元素，但当我使用ng-repeat为每个点创建<circle>元素时，会出现无法接受的效果。

为了确保性能不是由于SVG性能，我复制了角度生成的SVG输出并创建了一个静态.html文件，其中包含大约5个包含大约10,000 <circle>个元素的图形。静态文件几乎立即呈现。我还确认，这不是我用于生成和缩放点的样板代码，因为没有<circle>元素（只有2 <path>个元素），性能非常出色。

我已将其缩小到ng-repeat的DOM注入机制，或者ng-repeat为每个元素创建子范围，并使用自己的脏检查观察器。基于一些详尽的研究，它似乎更有可能是后者。

以下是生成图表的模板：

<svg width="1020" height="220">
    <g class="series" transform="translate(10,10)">
        <path class="series-fill" d="{{ series.path('fill') }}" stroke="none" fill="#ddd"></path>
        <path class="series-path" d="{{ series.path('line') }}" stroke="#999" stroke-width="1" fill="none"></path>
        <g class="series-points" stroke-width="1" stroke="#fff">
            <circle ng-repeat="point in points" class="series-point" r="2" cx="{{ point.scaledX }}" cy="{{ point.scaledY }}"></circle>                                                                                           
        </g>

    </g>
</svg>

TL; DR，使用ng-repeat的角度或推荐方法是什么 - 就像没有对每个元素进行脏检查或没有使用观察者创建新的子范围一样。显然，分页/无限滚动不适用于此。

ng-repeat性能超过数千个元素，没有限制过滤器

0 个答案: