CODEWITHSUNDEEP
javascriptperformance
Dhaval Lila
Dhaval Lila

Reputation: 425

how use performance observers api to find long task information

I am learning performance observer API and I want to find out how many long tasks are there in code so I have written this piece of code :

const observer = new PerformanceObserver((list) => { 
  for (const entry of list.getEntries()) { 
    console.log(entry); 
  }
}); 
observer.observe({entryTypes: ['longtask']});

now all I get is this

enter image description here

can anyone tell me how can I find out which task is long task I mean what is causing it or where it is happening ?

Upvotes: 5

Views: 1878

Answers (1)

Kevin Farrugia
Kevin Farrugia

Reputation: 7449

Updated 2023-05-23

You are able to track long tasks using the longtask performance entry type. Note that this is an experimental feature only available in Chromium-based browsers.

The below code will list all long tasks:

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({ type: "longtask", buffered: true });

Unless you are looking at default marks, for example first-paint, script, XMLHttpRequest...etc which are visible in the Performance tab in Chrome DevTools, you are required to set up named marks to take advantage of the User Timing API.

performance.mark("start_test")
await doWork(); // the function you want to test
performance.mark("end_test")
performance.measure("test", "start_test", "end_test"); // create a measure named "test"

performance.getEntriesByName("test").forEach(entry => {
        // Display each reported measurement on console
        if (console) {
            console.log("Name: "       + entry.name      +
                      ", Type: "     + entry.entryType +
                      ", Start: "    + entry.startTime +
                      ", Duration: " + entry.duration  + "\n");
        }
      })

Upvotes: 3

Related Questions