Как использовать API наблюдателей производительности, чтобы найти длинную информацию о задачах

Question

Я изучаю API наблюдателя за производительностью и хочу узнать, сколько в коде длинных задач, поэтому я написал этот фрагмент кода:

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

Теперь все, что я получаю, это

Может кто-нибудь сказать мне, как я могу узнать, какое задание является долгим заданием? Я имею в виду, что его вызывает или где оно происходит?

Answer 1

Если вы не смотрите на метки по умолчанию, например first-paint, script, XMLHttpRequest ... и т. Д., Которые видны на вкладке Performance в Chrome DevTools, я считаю, что вам необходимо установить именованные метки, чтобы воспользоваться преимуществами User Timing API .

performance.mark("start_test") // start the timer

await doWork(); // the function you want to test

performance.mark("end_test") // start the timer    

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");
        }
      })