angular.js $apply 瓶颈

Question

我正在使用实时数据在网页上使用 SVG 绘制一些线条。为了管理我使用 Angular.js 的数据并管理我使用 D3.js 的可视化。

我设置了一个角度控制器来保存数据（行）。数据由一些点数组（带有 x/y 坐标的字典）组成。有些行在初始化时是已知的，有些则根据实时数据更新。

我设置了一个包含 SVG 元素的角度指令 ('topView')。对于初始化时的每一行，我将其添加为路径：

var routeLeftLine = container.select("#routes").append("path");            
var routeLeftLineData = scope.val.route.left; // -> 1000+ points in there
routeLeftLine
            .attr("d", lineFunction(routeLeftLineData))
            .attr("stroke", "black")
            .attr("stroke-width", 1)
            .attr("fill", "none");

对于我想要不断更新的每一行 (1)，我设置了一个角度指令，例如：

<surface-cable val="data.cable"></surface-cable>

data 是控制器上的数据对象，data.cable 是点数组。 该指令如下所示：

OCMSWeb.directive('surfaceCable', function ( /* dependencies */ ) {
return {
    restrict: 'AE', 
    scope: { 
        val: '='
    },
    templateNamespace: 'svg',
    replace: true,
    template: '<g/>',
    link: function (scope, element, attrs) {
        var cableLine = d3.select(element[0]).append("path");

        scope.$watch('val', function () {
            var cableLineData = simplify(scope.val, 1, false); // size grows in time

            cableLine
                .attr("d", lineFunction(cableLineData))
                .attr("stroke", "rgb(240,144,32)")
                .attr("stroke-width", 1)
                .attr("fill", "none");
        }, true);
    }
};
});

当我使用计时器更新数据时，该结构工作正常，更改会反映在 SVG 中。

当我增加一行中的点数（> 1000 ...我将来需要更多）时，问题就出现了（不变的线和更新的线都有这种效果）性能下降。线的更新变得非常缓慢，即使要重绘的元素还不包含很多元素。

我找不到原因。 SVG/d3/angular 会再次渲染 svg 中的所有元素吗？
我绑定数据的方式效率低吗？我应该一起跳过d3吗？

我试图分析 javascript 性能，大约 80-90% 的 CPU 时间似乎用于 angular $apply 的调用（我认为它会扫描 DOM 以查找更改？）。如果一个元素（行是 <path> 元素）有很多数据点，为什么 $apply 需要这么长时间？

Answer 1

在这种架构下，1000 行意味着每次您更改范围内的任何内容时都会进行 1000 条指令、1000 次监视和 1000 次值比较，无论这些值是否实际发生了变化。我怀疑这里的根本问题是您的 d3 代码，尽管不必要地重置笔画、笔画宽度和填充的属性肯定没有帮助。

一般来说，更好的方法是使用一个指令，该指令采用一组线并处理 SVG 中所有电缆路径的布局。如果您正在查看成千上万条路径，那么您可能希望查看在画布上而不是 SVG 上渲染它们。

Answer 2

虽然@ethan-jewett 没有完全回答我的问题，但你回答了 指出我正确的方向。

因为我将控制器的“数据”字典（包含静态和动态数据）链接到指令，所以我认为 Angular 确实会检查其中的所有值是否有变化。通过将我的静态数据移出这个“数据”字典，它不会被检查，并使这个设置变得更快。

当我增加动态数据的大小时，分析仍然会产生角度变慢，我认为这是出于相同的原因（角度需要检查所有数据是否有变化）。我不确定我将如何解决这个问题：我将研究 D3.js 是否具有更有效的机制来检测数据的变化，或者我会将我的长数组拆分为静态和动态部分（因为它们表示路径/电缆，实际上只有电缆的末端可以改变。在某些时候，电缆的大部分可以被认为是静态的。）。