we are building an angular app and starting to have a peculiar problem . Whenever we load some data into our components the key press handler attach to one of out input field becomes slow. The problem does not happens when we do not load the data. Following is the code snippet of how are we loading the data from our backend. Initially we though it was due to fork join but removing it does not have any effect on key press handler performance. I have attached the image of memory profiling where it can be clearly seen that key press handler is taking long time.
forkJoin([this.fetcha(), this.fetchb(),
this.fetchc()]).subscribe(
responseArray => {
console.log("Initial data fetched", responseArray);
this.waitDialogRef.afterClosed().subscribe(() => {
this.populateA(responseArray[0]);
this.populateB(responseArray[1]);
this.populateC(responseArray[2]);
});
this.waitDialogRef.close();
}, error => {
console.log("Error occurred while fetching initial data", error);
});
}
)
<!--- html snipppet ----->
<div class='content-container'>
<div class='row-1'>
<input type="text" maxlength="17" value=""/>
</div>
UPDATE : somehow removing the css works decreases the key press delay. Looking at performance tab of chrome I see Considerable time is lost in rendering the layout
