17.Performance 中 DCL, L, FP, FCP, FMP, LCP 的含义?

Perfomance

关键时间节点	描述	含义
`TTFB`	`time to first byte`(首字节时间)	从请求到数据返回第一个字节所消耗时间
`TTI`	`Time to Interactive`(可交互时间)	DOM树构建完毕，代表可以绑定事件
`DCL`	`DOMContentLoaded` (事件耗时)	当 HTML 文档被完全加载和解析完成之后，`DOMContentLoaded` 事件被触发
`L`	`onLoad` (事件耗时)	当依赖的资源全部加载完毕之后才会触发
`FP`	`First Paint`（首次绘制)	第一个像素点绘制到屏幕的时间
`FCP`	`First Contentful Paint`(首次内容绘制)	首次绘制任何文本，图像，非空白节点的时间
`FMP`	`First Meaningful paint`(首次有意义绘制)	首次有意义绘制是页面可用性的量度标准
`LCP`	`Largest Contentful Paint`(最大内容渲染)	在`viewport`中最大的页面元素加载的时间
`FID`	`First Input Delay`(首次输入延迟)	用户首次和页面交互(单击链接，点击按钮等)到页面响应交互的时间

html

<div style="background:red;height:100px;width:100px"></div>
<h1 elementtiming="meaningful">姜文</h1>
<script>
    window.onload = function () {
        let ele = document.createElement('h1');
        ele.innerHTML = 'jw';
        document.body.appendChild(ele)
    }
    setTimeout(() => {
        const {
            fetchStart,
            requestStart,
            responseStart,
            domInteractive,
            domContentLoadedEventEnd,
            loadEventStart
        } = performance.timing;

        let TTFB = responseStart - requestStart; // ttfb
        let TTI = domInteractive - fetchStart; // tti
        let DCL = domContentLoadedEventEnd - fetchStart // dcl
        let L = loadEventStart - fetchStart;
        console.log(TTFB, TTI, DCL, L)
      
        const paint = performance.getEntriesByType('paint');
        const FP = paint[0].startTime;
        const FCP = paint[1].startTime; // 2s~4s
    }, 2000);

    let FMP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        FMP = entries[0];
        observer.disconnect();
        console.log(FMP)
    }).observe({ entryTypes: ['element'] });

    let LCP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        LCP = entries[entries.length - 1];
        observer.disconnect();
        console.log(LCP); // 2.5s-4s
    }).observe({ entryTypes: ['largest-contentful-paint'] });

    let FID;
    new PerformanceObserver((entryList, observer) => {
        let firstInput = entryList.getEntries()[0];
        if (firstInput) {
            FID = firstInput.processingStart - firstInput.startTime;
            observer.disconnect();
            console.log(FID)
        }
    }).observe({ type: 'first-input', buffered: true });
</script>

<div style="background:red;height:100px;width:100px"></div>
<h1 elementtiming="meaningful">姜文</h1>
<script>
    window.onload = function () {
        let ele = document.createElement('h1');
        ele.innerHTML = 'jw';
        document.body.appendChild(ele)
    }
    setTimeout(() => {
        const {
            fetchStart,
            requestStart,
            responseStart,
            domInteractive,
            domContentLoadedEventEnd,
            loadEventStart
        } = performance.timing;

        let TTFB = responseStart - requestStart; // ttfb
        let TTI = domInteractive - fetchStart; // tti
        let DCL = domContentLoadedEventEnd - fetchStart // dcl
        let L = loadEventStart - fetchStart;
        console.log(TTFB, TTI, DCL, L)
      
        const paint = performance.getEntriesByType('paint');
        const FP = paint[0].startTime;
        const FCP = paint[1].startTime; // 2s~4s
    }, 2000);

    let FMP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        FMP = entries[0];
        observer.disconnect();
        console.log(FMP)
    }).observe({ entryTypes: ['element'] });

    let LCP;
    new PerformanceObserver((entryList, observer) => {
        let entries = entryList.getEntries();
        LCP = entries[entries.length - 1];
        observer.disconnect();
        console.log(LCP); // 2.5s-4s
    }).observe({ entryTypes: ['largest-contentful-paint'] });

    let FID;
    new PerformanceObserver((entryList, observer) => {
        let firstInput = entryList.getEntries()[0];
        if (firstInput) {
            FID = firstInput.processingStart - firstInput.startTime;
            observer.disconnect();
            console.log(FID)
        }
    }).observe({ type: 'first-input', buffered: true });
</script>

17.Performance 中 DCL, L, FP, FCP, FMP, LCP 的含义? ​

17.Performance 中 DCL, L, FP, FCP, FMP, LCP 的含义?