JavaScript中的Long Tasks

Long Tasks，它可以直观地告诉我们哪些任务执行耗费了50毫秒或更多时间。

阻塞主线程达50毫秒或以上的任务会导致以下问题：

①可交互时间 延迟
②严重不稳定的交互行为(轻击、单击、滚动、滚轮等)延迟
③严重不稳定的事件回调延迟
④紊乱的动画和滚动

当我们写完一个页面，我们可以用这个API来检查页面性能。

用法：

var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        // Process long task notifications:
        // report back for analytics and monitoring
        // ...
    }
});
// register observer for long task notifications
observer.observe({entryTypes: ["longtask"]});
// Long script execution after this will result in queueing
// and receiving "longtask" entries in the observer.

结果：