js检测页面性能指标()-js

js检测页面性能指标()

检测获取fp、fcp、lcp、cls性能指标：

window.monitor = {
  isWinLoad: false,
  observer: null,
  sessionValue: 0,
  sessionEntries: [],
  data: {
    fp: 0,
    fcp: 0,
    lcp: 0,
    cls: 0
  }
}
/**
PerformanceObserver类进行监听
 */
window.monitor.observer = new PerformanceObserver(function (list) {
  for (const entry of list.getEntries()) {
    // lcp获得
    if (entry.entryType === 'largest-contentful-paint') {
      window.monitor.data.lcp = entry.startTime
    }
    // cls计算
    if (entry.entryType === 'layout-shift') {
      // 只计算没有最近用户输入的布局移位。
      if (!entry.hadRecentInput) {
        const firstSessionEntry = window.monitor.sessionEntries[0]
        const lastSessionEntry = window.monitor.sessionEntries[window.monitor.sessionEntries.length - 1]

        // 如果该条目发生在前一个条目之后不到1秒，且在会话中的第一个条目之后不到5秒，则将该条目包含在当前会话中。否则，开始一个新的会话。
        if (
          window.monitor.sessionValue &&
              entry.startTime - lastSessionEntry.startTime < 1000 &&
              entry.startTime - firstSessionEntry.startTime < 5000
        ) {
          window.monitor.sessionValue += entry.value
          window.monitor.sessionEntries.push(entry)
        } else {
          window.monitor.sessionValue = entry.value
          window.monitor.sessionEntries = [entry]
        }
        // 如果当前会话值大于当前CLS值，则更新CLS及其表项。
        if (window.monitor.sessionValue > window.monitor.data.cls) {
          window.monitor.data.cls = window.monitor.sessionValue
        }
      }
    }
    // fp、fcp获得
    if (entry.entryType === 'paint') {
      if (entry.name === 'first-paint') {
        window.monitor.data.fp = entry.startTime
      }
      if (entry.name === 'first-contentful-paint') {
        window.monitor.data.fcp = entry.startTime
      }
    }
  }
})

/**
entryTypes还有其他类型，这里只监听三个类型
buffered 属性表示是否观察缓存数据，也就是说观察代码添加时机比事情触发时机晚也没关系。
 */
window.monitor.observer.observe(
  {
    entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'],
    buffered: true
  }
)

window.addEventListener('load', function () {
  window.monitor.isWinLoad = true
}, true)

window.addEventListener('beforeunload', function () {
  if (window.monitor.isWinLoad) {
    console.log(window.monitor)
    /**
beforeunload应该选择什么样的方式进行传输上报？
异步ajax是不可靠的，无非保证上报。

可选择方式有以下几种：

1、同步ajax
同步ajax会阻断浏览器的unload，直到ajax环节结束后才会继续进行unload。
此方法的缺点是由于页面会在ajax请求结束后才延迟卸载，会导致关闭时浏览器出现卡顿降低用户的体验。
注意：chrome不支持在页面关闭事件内使用同步XMLHttpRequest请求

2、beacon
beacon api设计就是用来解决页面卸载时发送请求的问题。他能保证在页面unload完成前请求能够被发送，并且由于其是异步且非阻塞的，并不会影响浏览器其他页面的显示效率。
sendBeacon只能发送http post请求。
问题：此方法无法自定义header信息，如果服务端设置了token权限拦截，sendBeacon并没有办法将token信息放入请求中。

3、fetch
fetch方法配合参数中的keepalive字段会让浏览器在页面卸载后在后台继续接管网络请求，该字段是必须的。
此方法的缺陷为keepalive字段一次只能承载最大64KB的请求内容，且该限制是所有并行请求共享的，即，页面卸载阶段所有fetch+keepalive请求的内容体总和不能超过64KB。

4、创建img携带信息
此方法是get请求方式将参数传递，get参数本身可携带信息有限，不可传递大量信息。

     */
  }
}, true)

其他性能指标日后更新，参考链接https://zhuanlan.zhihu.com/p/420330110

检测获取fp、fcp、lcp、cls性能指标：

window.monitor = {
  isWinLoad: false,
  observer: null,
  sessionValue: 0,
  sessionEntries: [],
  data: {
    fp: 0,
    fcp: 0,
    lcp: 0,
    cls: 0
  }
}
/**
PerformanceObserver类进行监听
 */
window.monitor.observer = new PerformanceObserver(function (list) {
  for (const entry of list.getEntries()) {
    // lcp获得
    if (entry.entryType === 'largest-contentful-paint') {
      window.monitor.data.lcp = entry.startTime
    }
    // cls计算
    if (entry.entryType === 'layout-shift') {
      // 只计算没有最近用户输入的布局移位。
      if (!entry.hadRecentInput) {
        const firstSessionEntry = window.monitor.sessionEntries[0]
        const lastSessionEntry = window.monitor.sessionEntries[window.monitor.sessionEntries.length - 1]

        // 如果该条目发生在前一个条目之后不到1秒，且在会话中的第一个条目之后不到5秒，则将该条目包含在当前会话中。否则，开始一个新的会话。
        if (
          window.monitor.sessionValue &&
              entry.startTime - lastSessionEntry.startTime < 1000 &&
              entry.startTime - firstSessionEntry.startTime < 5000
        ) {
          window.monitor.sessionValue += entry.value
          window.monitor.sessionEntries.push(entry)
        } else {
          window.monitor.sessionValue = entry.value
          window.monitor.sessionEntries = [entry]
        }
        // 如果当前会话值大于当前CLS值，则更新CLS及其表项。
        if (window.monitor.sessionValue > window.monitor.data.cls) {
          window.monitor.data.cls = window.monitor.sessionValue
        }
      }
    }
    // fp、fcp获得
    if (entry.entryType === 'paint') {
      if (entry.name === 'first-paint') {
        window.monitor.data.fp = entry.startTime
      }
      if (entry.name === 'first-contentful-paint') {
        window.monitor.data.fcp = entry.startTime
      }
    }
  }
})

/**
entryTypes还有其他类型，这里只监听三个类型
buffered 属性表示是否观察缓存数据，也就是说观察代码添加时机比事情触发时机晚也没关系。
 */
window.monitor.observer.observe(
  {
    entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'],
    buffered: true
  }
)

window.addEventListener('load', function () {
  window.monitor.isWinLoad = true
}, true)

window.addEventListener('beforeunload', function () {
  if (window.monitor.isWinLoad) {
    console.log(window.monitor)
    /**
beforeunload应该选择什么样的方式进行传输上报？
异步ajax是不可靠的，无非保证上报。

可选择方式有以下几种：

1、同步ajax
同步ajax会阻断浏览器的unload，直到ajax环节结束后才会继续进行unload。
此方法的缺点是由于页面会在ajax请求结束后才延迟卸载，会导致关闭时浏览器出现卡顿降低用户的体验。
注意：chrome不支持在页面关闭事件内使用同步XMLHttpRequest请求

2、beacon
beacon api设计就是用来解决页面卸载时发送请求的问题。他能保证在页面unload完成前请求能够被发送，并且由于其是异步且非阻塞的，并不会影响浏览器其他页面的显示效率。
sendBeacon只能发送http post请求。
问题：此方法无法自定义header信息，如果服务端设置了token权限拦截，sendBeacon并没有办法将token信息放入请求中。

3、fetch
fetch方法配合参数中的keepalive字段会让浏览器在页面卸载后在后台继续接管网络请求，该字段是必须的。
此方法的缺陷为keepalive字段一次只能承载最大64KB的请求内容，且该限制是所有并行请求共享的，即，页面卸载阶段所有fetch+keepalive请求的内容体总和不能超过64KB。

4、创建img携带信息
此方法是get请求方式将参数传递，get参数本身可携带信息有限，不可传递大量信息。

     */
  }
}, true)

其他性能指标日后更新，参考链接https://zhuanlan.zhihu.com/p/420330110