1

所以，我有一个包含一些 d3 的组件。这不是特别复杂。但是 SVG 需要不断地转换。为了做到这一点。一旦执行转换的函数运行，它就会设置超时以在几秒钟内再次调用自己。

当这段代码运行时，我电脑上的风扇立即打开，CPU 跳到 40% +/-。如果我只是构建 svg，然后不在异步循环中运行动画，那么 CPU 只有百分之几。正如我所期望的那样。当我在 DevTools 中暂停 JS 执行时，调用堆栈指向一个 CD 循环。

我的问题是：如何让 d3 动画不强制 Angular 的更改检测运行得如此疯狂？

这是正在运行的代码。它在我的一门课内：

const animate = () => {
    // this points to a piece of the SVG in my template
    gradient
        .transition()
        .duration(6001)
        .ease(d3.easeSin)
        .attr('r', 0.65)
        .transition()
        .duration(6001)
        .ease(d3.easeSin)
        .attr('r', 0.35);

    this.zone.runOutsideAngular(() => {
        this.timeout = setTimeout(() => {
            this.zone.runOutsideAngular(animate);
        }, 12003);
    });
};

this.zone.runOutsideAngular(animate);

这是我到目前为止所尝试的：

  • 如您所见，我尝试将其与runOutsideAngular调用一起包装。没有帮助。
    • 我将组件的 ChangeDetectionStrategy 更改为 OnPush。没有帮助。
    • 我在 import ofd3之前添加了 import of zone.js，希望d3在区域设置和运行之前所有功能都会初始化。没有帮助。

我只是想让这个动画在 Angular 之外运行。这是组件的示例。如果您打开它，请注意浏览器中该选项卡上的 CPU 使用率会飙升至 30%、40%、50%？https://plnkr.co/edit/VQAuQzA2JzKNoArmgbfn?p=preview

4

1 回答 1

0

你可以试试这个。

  1. 消除

  2. 在加载 zone.js 之前，添加此标志。__Zone_disable_requestAnimationFrame = true;

这是更新的示例。

__Zone_disable_requestAnimationFrame = true;

https://plnkr.co/edit/ft1AdgMh9cGR5rfSxbkk?p=preview

于 2018-03-15T06:55:46.197 回答