2

TLDR

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

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

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

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

奇怪的是：已经升级到 Angular 的组件没有这种行为！当您移动鼠标时，大麦不会对 CPU 监视器产生影响。然而，在尚未升级的旧 AngularJS 组件中，如下图所示。

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

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 部分没有这个巨大的性能问题呢？

4

0 回答 0