浏览器性能指标

一、浏览器渲染页面指标

• load（Onload Event），它代表页面中依赖的所有资源加载完的事件。

• DCL（DOMContentLoaded），DOM解析完毕。

• FP（First Paint），表示渲染出第一个像素点。FP一般在HTML解析完成或者解析一部分时候触发。

• FCP（First Contentful Paint），表示渲染出第一个内容，这里的“内容”可以是文本、图片、canvas。

• FMP（First Meaningful Paint），首次渲染有意义的内容的时间，“有意义”没有一个标准的定义，FMP的计算方法也很复杂。

• LCP（largest contentful Paint），最大内容渲染时间

二、页面监听渲染过程方法，通过PerformanceObserver可以监测到对应的FCP时间

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

三、那么浏览器内核webkit尝试找一下first-contentful-paint方法，在webkit内核代码搜到了

class PerformancePaintTiming final : public PerformanceEntry {
public:
    static Ref<PerformancePaintTiming> createFirstContentfulPaint(DOMHighResTimeStamp timeStamp)
    {
        return adoptRef(*new PerformancePaintTiming("first-contentful-paint"_s, timeStamp));
    }

private:
    PerformancePaintTiming(const String& name, DOMHighResTimeStamp timeStamp)
        : PerformanceEntry(name, timeStamp, timeStamp)
    {
    }

    ASCIILiteral entryType() const final { return "paint"_s; }
    Type performanceEntryType() const final { return Type::Paint; }

    ~PerformancePaintTiming() = default;
};

}