Violation Long running JavaScript task took xx ms

Question

It's the first time I've ever received this type of warning, which I received recently:

[Violation] Long running JavaScript task took 234ms
[Violation] Forced reflow while executing JavaScript took 45ms

As a member of a team working on a project, I have no idea where this is coming from. 

Never previously has this occurred. 

It arose out of nowhere when another person joined the endeavor. 

How can I determine which file or function generated this warning? 

I've been searching for the response, but primarily for a way to approach the problem. 

If I can't even identify the root of the issue, I can't fix it.

In this instance, only Chrome receives the warning. 

Although I attempted to use Edge, I received no identical alerts, and I haven't yet tried it on Firefox.

I also experience the following jquery.min.js error:

[Violation] Handler took 231ms of runtime (50ms allowed)            jquery.min.js:2

Answer 1

These messages are classified as warnings rather than errors because they are unlikely to cause major issues. It may result in dropped frames or a less smooth experience.

They are, however, worth investigating and correcting in order to improve the quality of your application. This can be accomplished by paying attention to the circumstances under which the messages appear and performing performance testing to pinpoint the source of the problem. To begin performance testing, simply insert the following code:

function someMethodIThinkMightBeSlow() {
    const startTime = performance.now();

    // Do the normal stuff for this function

    const duration = performance.now() - startTime;
    console.log(`someMethodIThinkMightBeSlow took ${duration}ms`);
}

Once you've identified some code that's taking a long time (50ms is Chrome's threshold), you have two options:

1. Remove some or all of the tasks that are potentially unnecessary.
2. Determine how to complete the same task in less time.
3. Divide the code into multiple asynchronous steps 
(1) and (2) may be difficult or impossible, but they are sometimes really easy and should be your first attempts. If necessary, it should always be possible to do so (3). You will use something like:

setTimeout(functionToRunVerySoonButNotNow);

or

// This one is not available natively in IE, but there are polyfills available.
Promise.resolve().then(functionToRunVerySoonButNotNow);