性能优化之性能监控

一、基础概念

首先来探讨一下一个网页为什么会出现白屏：

image.png

我们来看下一个网页从白屏到内容展示都经历了哪些过程，如下图所示：

image.png

TTFB：Time To First Byte, ⾸字节时间
FP：First Paint, ⾸次绘制，绘制body
FCP：First Contentful Paint，首次有内容的绘制，第一个dom元素绘制完成
FMP：First Meaningful Paint，⾸次有意义的绘制
TTI：Time To Interactive, 可交互时间。整个内容渲染完成
对应如下图：

image.png

我们以代码来举例：

image.png
FP:仅有⼀一个 div 根节点。
image.png
FCP:包含⻚页⾯面的基本框架，但没有数据内容。
image.png
FMP:包含⻚页⾯面所有元素及数据。

这与vue的几个生命周期类似，来看一下：

image.png
image.png

二、长任务

简单来说，任何在浏览器中执行超过 50 ms 的任务，都是 long task。
long task 会长时间占据主线程资源，进而阻碍了其他关键任务的执行/响应，造成页面卡顿。

image.png

三、实战

下面我们用代码来监控下FP，FTP，FMP，以及longtask所花费的时间

// const result = window.performance.getEntriesByType("paint"); // 获取fp,fcp
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry);
        console.log(entry.name + "执行时间", entry.startTime + entry.duration);
    }
});

observer.observe({
    entryTypes: ["paint"]
});

// fmp
<div id="app">
        111
        <script>
            performance.mark("text done"); // mark点
        </script>

    </div>
    <!-- <script src="./demo/1.fp&FTP.js"></script> -->
    <script>
        const perfEntries = performance.getEntriesByType("mark");
        for (const entry of perfEntries) {
            console.log(entry);
            console.log(entry.name + "执行时间", entry.startTime + entry.duration);
        }
    </script>

// tti
<div id="app">
        111
    </div>
    <script src="./node_modules/tti-polyfill/tti-polyfill.js"></script>
    <script>
        // window.onload = function name(params) {
        //     console.log("onload");
        // }
        // import ttiPolyfill from './path/to/tti-polyfill.js';
        ttiPolyfill.getFirstConsistentlyInteractive().then((tti) => { // tti比window.onload要晚
            // Use `tti` value in some way.
            //统计的数据
            console.log(tti);
            //navigator.sendBeacon("a.gif?v="+11)
        });
    </script>

// longtask
const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(item => {
    // longtask 的类型
    console.log(`long task name is: ${item.name}`);
    console.log(`long task attribution is:`);
    // longtask 的具体信息
    console.log(JSON.stringify(item.attribution, null, 2));
  });
});
// 仅关注 longtask
observer.observe({ entryTypes: ["longtask"] });

四、

image.png