mark和measure类型测试实例页面

JS代码：

// mark标记
performance.mark('test-start', {
    startTime: 0,
      detail: { htmlElement: 'output' }
});

setTimeout(() => {
    performance.mark('test-end', {
        startTime: 360,
        detail: { htmlElement: 'footer' }
    });    
    
    const testMeasure = performance.measure(
      "test-start",
      "test-end"
    );
    
    console.dir(testMeasure);
}, 360);

const observer = new PerformanceObserver(entryList => {
    entryList.getEntries().forEach((entry) => {
        var logMark = '';
        var logMeasure = '';
        if (entry.entryType === 'mark') {
              logMark = `${entry.name}的startTime是: ${entry.startTime}`;
              console.log(logMark);
        }
        if (entry.entryType === 'measure') {
              console.log(logMeasure = `${entry.name}的duration时间是: ${entry.duration}`);
        }
        
        output.innerHTML += (logMark + '<br>' + logMeasure);
    });
});
observer.observe({
      entryTypes: ['mark', 'measure']
});