AngularJS部件中的Angular Hybrid性能问题-Mousemove导致100％CPU负载

Question

TLDR

• 将鼠标移到Angular Components上-一切都很好！
• 将鼠标移到AngularJS组件上-很高的CPU负载，性能问题，为什么？

---

我们有一个Angular Hybrid应用程序。使用的版本是：

• 角度：7.1.3
• AngularJS：1.7.5
• zone.js：0.8.28

不幸的是，我们遇到了大量的性能问题。我发现，当您移动鼠标时，CPU负载会高达100％。

奇怪的是：已经升级到Angular的组件没有这种行为！当您移动鼠标时，它不会对CPU Monitor产生影响。但是，在尚未升级的旧AngularJS-Components中，其外观如下图所示。

在zone.js中，我们使用了黑名单，如所述的here

polyfills.js ，（通过index.html导入）

window.__Zone_disable_requestAnimationFrame = true; /* disable patch requestAnimationFrame */
window.__Zone_disable_on_property = true; /* disable patch onProperty such as onclick */
window.__zone_symbol__BLACK_LISTED_EVENTS = [
    'scroll',
    'mouseenter',
    'mouseleave',
    'mouseout',
    'mouseover',
    'mousewheel',
    'mousemove',
    'dragover',
    'dragenter',
    'dragleave',
]; /* disable patch specified eventNames */

/* black list scroll event handler for onProp */
const targets = [window, Document.prototype, HTMLBodyElement.prototype, HTMLElement.prototype];
window.__Zone_ignore_on_properties = [];
targets.forEach(function(target) {
    window.__Zone_ignore_on_properties.push({
        target: target,
        ignoreProperties: ['scroll', 'mouseenter', 'mouseleave', 'mousemove', 'mouseover', 'mouseout', 'mousewheel'],
    });
});
window.__Zone_disable_XHR = true;

那么，我们如何解决这个问题，使AngularJS Part不会出现如此大的性能问题？