Проблемы с производительностью Angular Hybrid в AngularJS Part - Mousemove вызывает 100% загрузку процессора - PullRequest
Новая
       43

Проблемы с производительностью Angular Hybrid в AngularJS Part - Mousemove вызывает 100% загрузку процессора

0 голосов
/ 18 января 2019

TLDR

  • Наведите курсор на угловые компоненты - все в порядке!
  • Наведите указатель мыши на компоненты AngularJS - очень высокая загрузка процессора, проблемы с производительностью, почему?

У нас есть угловое гибридное приложение. Используемые версии:

  • Угловой: 7.1.3
  • AngularJS: 1,7,5
  • zone.js: 0,8,28

К сожалению, у нас огромные проблемы с производительностью. Я обнаружил, что при перемещении мыши загрузка процессора увеличивается до до 100% .

Странная вещь: компоненты, которые уже обновлены до Angular, не имеют такого поведения! Когда вы перемещаете мышь, она не влияет на монитор процессора. Однако в старых AngularJS-Components, которые еще не обновлены, это выглядит как на рисунке ниже.

В zone.js мы использовали черные списки, как описано здесь

polyfills.js , (импортируется byindex.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;

enter image description here

Итак, как мы можем решить эту проблему, чтобы у части AngularJS не было этой огромной проблемы с производительностью?

...