web性能查看

前言

1.performance

• 用于精确度量，控制，增强浏览器的性能表现。这个API为了测量网站性能，提供以前没有办法做到的精度。

2.web-vitals插件

• 获取网页性能指标

3.PerformanceObserver

• PerformanceObserver 可用于获取性能相关的数据，例如首帧fp、首屏fcp、首次有意义的绘制 fmp等等。可以用它来获取首屏、白屏的时间

1.获取静态资源

// 通过获取
const entries = performance.getEntriesByType('resource'); //获取该页面请求的资源
// 过滤掉非静态资源的 fetch、 xmlhttprequest、beacon
  let list = entries.filter(entry => {
    return ['fetch', 'xmlhttprequest', 'beacon'].indexOf(entry.initiatorType) === -1;
  });

2.获取内存情况

let jsHeapSizeLimit = performance.memory && performance.memory.jsHeapSizeLimit, // 内存大小的限制
let totalJSHeapSize = performance.memory && performance.memory.totalJSHeapSize, // 总内存的大小。
let usedJSHeapSize = performance.memory && performance.memory.usedJSHeapSize, // 表示可使用的内存的大小。

3.长任务加载详情

const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()){
   console.groupCollapsed(entry.name);
   console.log(entry.entryType);
   console.log(entry.startTime);
   console.log(entry.duration);
   console.groupEnd(entry.name);
  }
 }) 
 observer.observe({entryTypes:['longtask']});

4.获取FCP、LCP、TTFB、FID等指标

// 1.web-vitals 不兼容低版本safari浏览器
import { onLCP, onFID, onCLS, onFCP, onTTFB } from 'web-vitals'; //调用方法即可
// 2. PerformanceObserver
const observer = new PerformanceObserver((list) => {
  for(const entry of list.getEntries()){
   console.groupCollapsed(entry.name);
   console.log(entry.entryType);
   console.log(entry.startTime);
   console.log(entry.duration);
   console.groupEnd(entry.name);
  }
 }) 
 observer.observe({entryTypes:['paint','largest-contentful-paint','first-input','layout-shift','navigation']});
 // paint:FCP  largest-contentful-paint: LCP  first-input:FIP  TTFB:navigation