largest-contentful-paint运行测试实例页面

回到相关文章 »

展示

输出结果是:


                
PerformanceEntryPerformanceEntryPerformanceMarkPerformanceMarkPerformanceMeasurePerformanceMeasurePerformancePaintTimingPerformancePaintTimingPerformanceResourceTimingPerformanceResourceTimingPerformanceNavigationTimingPerformanceNavigationTimingPerformanceElementTimingPerformanceElementTimingPerformanceLongTaskTimingPerformanceLongTaskTimingPerformanceEventTimingPerformanceEventTimingTaskAttributionTimingTaskAttributionTimingLargestContentfulPaintLargestContentfulPaintPerformancePerformancePerformanceObserverPerformanceObserverLayoutShiftLayoutShiftVisibilityStateEntryVisibilityStateEntry

代码

JS代码:
const observer = new PerformanceObserver(entryList => {
    for (const entry of entryList.getEntries()) {
        if (entry.element) {
            var selector = entry.element.tagName.toLowerCase();
            if (entry.element.id) {
                selector = selector + '#' + entry.element.id;
            }
        }
        
        const strEntry = JSON.stringify(entry).replace('"startTime"', '"element":"' + selector + '","startTime"');
        console.dir(entry);
        
        setTimeout(() => {
            output.innerHTML += strEntry + '<br>';
        }, 200);
    }
});
observer.observe({
  entryTypes: ['largest-contentful-paint']
});