cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

revert: feat: add a flag in bootstrap to enable coalesce event change detection to improve performance (#30533) (#33230)

Browse Source 
This reverts commit 21c1e14385.

PR Close #33230
This commit is contained in:
Matias Niemelä
2019-10-17 08:48:37 -07:00
parent d192a7b47a
commit 082aed6e46
11 changed files with 21 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
packages/core/src/application_ref.ts
View File

@ -219,27 +219,6 @@ export interface BootstrapOptions {
* - `noop` - Use `NoopNgZone` which does nothing.
*/
ngZone?: NgZone|'zone.js'|'noop';
/**
* Optionally specify coalescing event change detections or not.
* Consider the following case.
*
* <div (click)="doSomething()">
* <button (click)="doSomethingElse()"></button>
* </div>
*
* When button is clicked, because of the event bubbling, both
* event handlers will be called and 2 change detections will be
* triggered. We can colesce such kind of events to only trigger
* change detection only once.
*
* By default, this option will be false. So the events will not be
* colesced and the change detection will be triggered multiple times.
* And if this option be set to true, the change detection will be
* triggered async by scheduling a animation frame. So in the case above,
* the change detection will only be trigged once.
*/
ngZoneEventCoalescing?: boolean;
}
/**
@ -290,8 +269,7 @@ export class PlatformRef {
// So we create a mini parent injector that just contains the new NgZone and
// pass that as parent to the NgModuleFactory.
const ngZoneOption = options ? options.ngZone : undefined;
const ngZoneEventCoalescing = (options && options.ngZoneEventCoalescing) || false;
const ngZone = getNgZone(ngZoneOption, ngZoneEventCoalescing);
const ngZone = getNgZone(ngZoneOption);
const providers: StaticProvider[] = [{provide: NgZone, useValue: ngZone}];
// Attention: Don't use ApplicationRef.run here,
// as we want to be sure that all possible constructor calls are inside `ngZone.run`!
@ -387,17 +365,14 @@ export class PlatformRef {
get destroyed() { return this._destroyed; }
}
function getNgZone(
ngZoneOption: NgZone | 'zone.js' | 'noop' | undefined, ngZoneEventCoalescing: boolean): NgZone {
function getNgZone(ngZoneOption?: NgZone | 'zone.js' | 'noop'): NgZone {
let ngZone: NgZone;
if (ngZoneOption === 'noop') {
ngZone = new NoopNgZone();
} else {
ngZone = (ngZoneOption === 'zone.js' ? undefined : ngZoneOption) || new NgZone({
enableLongStackTrace: isDevMode(),
shouldCoalesceEventChangeDetection: ngZoneEventCoalescing
});
ngZone = (ngZoneOption === 'zone.js' ? undefined : ngZoneOption) ||
new NgZone({enableLongStackTrace: isDevMode()});
}
return ngZone;
}

29
packages/core/src/util/raf.ts
View File

@ -1,29 +0,0 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {global} from './global';
export function getNativeRequestAnimationFrame() {
let nativeRequestAnimationFrame: (callback: FrameRequestCallback) => number =
global['requestAnimationFrame'];
let nativeCancelAnimationFrame: (handle: number) => void = global['cancelAnimationFrame'];
if (typeof Zone !== 'undefined' && nativeRequestAnimationFrame && nativeCancelAnimationFrame) {
// use unpatched version of requestAnimationFrame(native delegate) if possible
// to avoid another Change detection
const unpatchedRequestAnimationFrame =
(nativeRequestAnimationFrame as any)[(Zone as any).__symbol__('OriginalDelegate')];
if (unpatchedRequestAnimationFrame) {
nativeRequestAnimationFrame = unpatchedRequestAnimationFrame;
}
const unpatchedCancelAnimationFrame =
(nativeCancelAnimationFrame as any)[(Zone as any).__symbol__('OriginalDelegate')];
if (unpatchedCancelAnimationFrame) {
nativeCancelAnimationFrame = unpatchedCancelAnimationFrame;
}
}
return {nativeRequestAnimationFrame, nativeCancelAnimationFrame};
}

55
packages/core/src/zone/ng_zone.ts
View File

@ -7,9 +7,6 @@
*/
import {EventEmitter} from '../event_emitter';
import {global} from '../util/global';
import {getNativeRequestAnimationFrame} from '../util/raf';
/**
* An injectable service for executing work inside or outside of the Angular zone.
@ -86,11 +83,8 @@ import {getNativeRequestAnimationFrame} from '../util/raf';
* @publicApi
*/
export class NgZone {
readonly hasPendingZoneMicrotasks: boolean = false;
readonly lastRequestAnimationFrameId: number = -1;
readonly shouldCoalesceEventChangeDetection: boolean = true;
readonly hasPendingMacrotasks: boolean = false;
readonly hasPendingMicrotasks: boolean = false;
readonly hasPendingMacrotasks: boolean = false;
/**
* Whether there are no outstanding microtasks or macrotasks.
@ -121,8 +115,7 @@ export class NgZone {
*/
readonly onError: EventEmitter<any> = new EventEmitter(false);
constructor({enableLongStackTrace = false, shouldCoalesceEventChangeDetection = false}) {
constructor({enableLongStackTrace = false}) {
if (typeof Zone == 'undefined') {
throw new Error(`In this configuration Angular requires Zone.js`);
}
@ -145,7 +138,6 @@ export class NgZone {
self._inner = self._inner.fork((Zone as any)['longStackTraceZoneSpec']);
}
self.shouldCoalesceEventChangeDetection = shouldCoalesceEventChangeDetection;
forkInnerZoneWithAngularBehavior(self);
}
@ -229,19 +221,16 @@ export class NgZone {
function noop() {}
const EMPTY_PAYLOAD = {};
const {nativeRequestAnimationFrame} = getNativeRequestAnimationFrame();
interface NgZonePrivate extends NgZone {
_outer: Zone;
_inner: Zone;
_nesting: number;
_hasPendingMicrotasks: boolean;
hasPendingMacrotasks: boolean;
hasPendingMicrotasks: boolean;
lastRequestAnimationFrameId: number;
hasPendingMacrotasks: boolean;
isStable: boolean;
shouldCoalesceEventChangeDetection: boolean;
}
function checkStable(zone: NgZonePrivate) {
@ -262,35 +251,16 @@ function checkStable(zone: NgZonePrivate) {
}
}
function delayChangeDetectionForEvents(zone: NgZonePrivate) {
if (zone.lastRequestAnimationFrameId !== -1) {
return;
}
zone.lastRequestAnimationFrameId = nativeRequestAnimationFrame.call(global, () => {
zone.lastRequestAnimationFrameId = -1;
updateMicroTaskStatus(zone);
checkStable(zone);
});
updateMicroTaskStatus(zone);
}
function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
const delayChangeDetectionForEventsDelegate = () => { delayChangeDetectionForEvents(zone); };
const maybeDelayChangeDetection = !!zone.shouldCoalesceEventChangeDetection &&
nativeRequestAnimationFrame && delayChangeDetectionForEventsDelegate;
zone._inner = zone._inner.fork({
name: 'angular',
properties:
<any>{'isAngularZone': true, 'maybeDelayChangeDetection': maybeDelayChangeDetection},
properties: <any>{'isAngularZone': true},
onInvokeTask: (delegate: ZoneDelegate, current: Zone, target: Zone, task: Task, applyThis: any,
applyArgs: any): any => {
try {
onEnter(zone);
return delegate.invokeTask(target, task, applyThis, applyArgs);
} finally {
if (maybeDelayChangeDetection && task.type === 'eventTask') {
maybeDelayChangeDetection();
}
onLeave(zone);
}
},
@ -313,8 +283,7 @@ function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
// We are only interested in hasTask events which originate from our zone
// (A child hasTask event is not interesting to us)
if (hasTaskState.change == 'microTask') {
zone._hasPendingMicrotasks = hasTaskState.microTask;
updateMicroTaskStatus(zone);
zone.hasPendingMicrotasks = hasTaskState.microTask;
checkStable(zone);
} else if (hasTaskState.change == 'macroTask') {
zone.hasPendingMacrotasks = hasTaskState.macroTask;
@ -330,15 +299,6 @@ function forkInnerZoneWithAngularBehavior(zone: NgZonePrivate) {
});
}
function updateMicroTaskStatus(zone: NgZonePrivate) {
if (zone._hasPendingMicrotasks ||
(zone.shouldCoalesceEventChangeDetection && zone.lastRequestAnimationFrameId !== -1)) {
zone.hasPendingMicrotasks = true;
} else {
zone.hasPendingMicrotasks = false;
}
}
function onEnter(zone: NgZonePrivate) {
zone._nesting++;
if (zone.isStable) {
@ -357,8 +317,6 @@ function onLeave(zone: NgZonePrivate) {
* to framework to perform rendering.
*/
export class NoopNgZone implements NgZone {
readonly hasPendingZoneMicrotasks: boolean = false;
readonly lastRequestAnimationFrameId = -1;
readonly hasPendingMicrotasks: boolean = false;
readonly hasPendingMacrotasks: boolean = false;
readonly isStable: boolean = true;
@ -366,7 +324,6 @@ export class NoopNgZone implements NgZone {
readonly onMicrotaskEmpty: EventEmitter<any> = new EventEmitter();
readonly onStable: EventEmitter<any> = new EventEmitter();
readonly onError: EventEmitter<any> = new EventEmitter();
readonly shouldCoalesceEventChangeDetection: boolean = false;
run(fn: (...args: any[]) => any, applyThis?: any, applyArgs?: any): any {
return fn.apply(applyThis, applyArgs);

2
packages/core/test/fake_async_spec.ts
View File

@ -95,7 +95,7 @@ const ProxyZoneSpec: {assertPresent: () => void} = (Zone as any)['ProxyZoneSpec'
resolvedPromise.then((_) => { throw new Error('async'); });
flushMicrotasks();
})();
}).toThrow();
}).toThrowError(/Uncaught \(in promise\): Error: async/);
});
it('should complain if a test throws an exception', () => {

2
packages/core/testing/src/ng_zone_mock.ts
View File

@ -16,7 +16,7 @@ import {EventEmitter, Injectable, NgZone} from '@angular/core';
export class MockNgZone extends NgZone {
onStable: EventEmitter<any> = new EventEmitter(false);
constructor() { super({enableLongStackTrace: false, shouldCoalesceEventChangeDetection: false}); }
constructor() { super({enableLongStackTrace: false}); }
run(fn: Function): any { return fn(); }

3
packages/core/testing/src/test_bed.ts
View File

@ -402,8 +402,7 @@ export class TestBedViewEngine implements TestBed {
overrideComponentView(component, compFactory);
}
const ngZone =
new NgZone({enableLongStackTrace: true, shouldCoalesceEventChangeDetection: false});
const ngZone = new NgZone({enableLongStackTrace: true});
const providers: StaticProvider[] = [{provide: NgZone, useValue: ngZone}];
const ngZoneInjector = Injector.create({
providers: providers,