javascript 单击按钮时出现 Angular 6 或 5 性能问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50377289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 6 or 5 Performance issue on button click
提问by TimHorton
I'm currently working on an Angular 6 application. I'm facing a performance issue with a simple component: Button Click, increment or decrement a counter variable.
我目前正在开发 Angular 6 应用程序。我正面临一个简单组件的性能问题：按钮单击、增加或减少计数器变量。
The counter.component.htmllooks like that:
该counter.component.html看起来像这样：
<div>Count: <strong>{{ currentCnt }}</strong></div>
<button (click)="manageCounter()"> + </button>
the counter.component.tslooks like that:
在counter.component.ts看起来像这样：
import { Component } from '@angular/core';
@Component({
selector: 'counter',
templateUrl: './counter.component.html'
})
export class CounterComponent {
public currentCnt = 0;
public manageCounter() {
this.currentCount++;
}
}
This is a very basic example. The counter component is used in a bigger application together with several other components.
这是一个非常基本的例子。计数器组件与其他几个组件一起用于更大的应用程序。
The problem is, when I quickly click the button several times on a smartphone or if I change the Chrome settings=>Performance to CPU: Slowdown, and click the button several times in a row, the Counter increments or decrements very slowly, with a delay of a few milliseconds.
问题是，当我在智能手机上快速单击该按钮数次，或者如果我将 Chrome 设置=>性能更改为 CPU：减速，并连续单击该按钮数次，计数器会非常缓慢地增加或减少，并显示几毫秒的延迟。
I'm wondering, maybe this behaviour is due to the event bubbeling. Perhaps there is a better way to register the events differently?
我想知道，也许这种行为是由于事件冒泡。也许有更好的方法来以不同的方式注册事件？
Do you know how to solve such a performance issue in Angular 6 or 5?
你知道如何在 Angular 6 或 5 中解决这样的性能问题吗？
Thank you!!
谢谢！！
回答by Anshuman Jaiswal
You can try with stopping propagation as:
您可以尝试停止传播：
HTML
HTML
<button (click)="manageCounter($event)"> + </button>
component.ts
组件.ts
public manageCounter($event) {
$event.stopPropagation();
this.currentCount++;
}
回答by Mark
I'm going to follow up with a possibility. If you are in dev-mode you may be getting more lag off zone.js. I just realized all my problems are when I'm running ng serve --open.. but when I run my buildprod task, the prod version is peppy.
我会跟进一个可能性。如果您处于开发模式，您可能会在 zone.js 上出现更多延迟。我刚刚意识到我所有的问题都是在我运行时ng serve --open..但是当我运行我的 buildprod 任务时，prod 版本很活跃。
ng build --target=production --environment=prodgive that a shot.
ng build --target=production --environment=prod试一试。
Edit: I had to switch to ng build --prodin Angular 6 too.
编辑：我也必须切换到ng build --prodAngular 6。
