An Angular 2 website has a websocket constantly updating data in the grid from the backend. To highlight recent updates, CSS is used to change the background color and font style of affected cells.
The highlighted indicators should only be visible for a short period.
1) At first, all indicators were reset when new data arrived from the server. However, in some cases where updates are infrequent, the indicators remained for long periods, causing confusion.
To provide a more consistent user experience, it was suggested that update indicators disappear after a fixed time interval, such as 4 seconds.
2) A second attempt involved using CSS animations, but this caused significant lag after prolonged use. It seems that running too many animations simultaneously may overload the browser's capacity to handle them effectively.
3) The latest approach involves implementing a TimerService that runs at fixed intervals to check and reset due items. While this method works, frequent violation warnings have been observed:
[Violation] 'setInterval' handler took 56ms
[Violation] 'setInterval' handler took 74ms
[Violation] 'setInterval' handler took 63ms
[Violation] 'setInterval' handler took 88ms
...
Despite the warning messages, the actual checkItems method only takes 0.03ms to execute. This discrepancy raises questions about possible optimizations or alternative frontend-friendly solutions.
The team has a background in C# and relatively limited experience with Angular. Could their backend-oriented mindset be affecting their frontend approaches?
Is there a context-switching issue that has been overlooked?
Are there any optimizations that could enhance the code performance?
All suggestions and insights are welcome!
Below is the implementation of the TimerService causing the violation warnings:
import { Injectable, OnInit } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { Subject } from "rxjs/Subject";
@Injectable()
export class TimerService {
private timerItems: TimerItem[] = [];
private dueTimeReachedSubject: Subject<string> = new Subject<string>();
public dueTimeReached: Observable<string> = this.dueTimeReachedSubject.asObservable();
constructor() {
setInterval(() => this.checkItems(), 1000);
}
private checkItems() {
let now = Date.now();
let removeKeys: string[] = [];
this.timerItems.filter(t => t.dueTime <= now).forEach(t => {
this.dueTimeReachedSubject.next(t.key);
removeKeys.push(t.key);
});
this.timerItems = this.timerItems.filter(t => removeKeys.indexOf(t.key) < 0);
}
public add(key: string, delayInSeconds: number) {
let dueTime = Date.now() + delayInSeconds * 1000;
let timerItem = this.timerItems.find(t => t.key === key);
if (timerItem) {
timerItem.dueTime = dueTime;
}
else {
this.timerItems.push(new TimerItem(key, dueTime));
}
}
public remove(key: string) {
this.timerItems = this.timerItems.filter(t => t.key !== key);
}
}
class TimerItem {
constructor(public key: string, public dueTime: number) { }
}
EDIT
Attempts were made to improve the service by utilizing Observable.interval and setTimeout; however, the same warning messages persisted. Even emptying the checkItems method did not resolve the warnings, indicating that the issue lies within the Angular framework itself.
While warnings for slow functions may be expected, the concern arises when a simple setInterval function triggers these alerts. Understanding why this occurs becomes crucial for optimizing the code execution speed.