页面性能计算

计算 LargestContentPaint

function observeLargestConentPaint(){
  if (!utils.canIUse('PerformanceObserver')) return;
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      const largestConentPaint = entry.startTime
      setPageInfo(pageId, {
        largestConentPaint
      })
    }
  }).observe({ type: 'largest-contentful-paint', buffered: true });
}

 

计算首屏渲染时间

监听首屏dom渲染时机

/**
 * 计算首屏渲染时间
 */
entries = [];
function observeFirstScreen(params) {
  if (!utils.canIUse('MutationObserver')) return;
  const next = window.requestAnimationFrame ? requestAnimationFrame : setTimeout
  const ignoreDOMList = ['STYLE', 'SCRIPT', 'LINK']
  const viewportWidth = window.innerWidth
  const viewportHeight = window.innerHeight
  // dom 对象是否在屏幕内
  function isInScreen(dom) {
    const rectInfo = dom.getBoundingClientRect()
    if (rectInfo.left < viewportWidth && rectInfo.top < viewportHeight) {
      return true
    }

    return false
  }
  const observer = new MutationObserver(mutationList => {
    const next = window.requestAnimationFrame ? requestAnimationFrame : setTimeout
    const entry = {
      children: [],
    }
    for (const mutation of mutationList) {
      if (mutation.addedNodes.length && isInScreen(mutation.target)) {
        console.log(mutation)
        entry.children.push(mutation.target)
        // ...
      }
    }

    if (entry.children.length) {
      entries.push(entry)
      next(() => {
        entry.startTime = performance.now()
      })
    }
  })

  observer.observe(document, {
    childList: true,
    subtree: true,
  })
}
function getRenderTime() {
  let startTime = 0
  entries.forEach(entry => {
    if (entry.startTime > startTime) {
      startTime = entry.startTime
    }
  })

  // 需要和当前页面所有加载图片的时间做对比，取最大值
  // 图片请求时间要小于 startTime，响应结束时间要大于 startTime
  // performance.getEntriesByType('resource').forEach(item => {
  //   if (
  //     item.initiatorType === 'img'
  //     && item.fetchStart < startTime
  //     && item.responseEnd > startTime
  //   ) {
  //     startTime = item.responseEnd
  //   }
  // })

  return startTime
}

 

上报时机

第一点，必须要在 DOM 不再变化后再上报渲染时间，一般 load 事件触发后，DOM 就不再变化了。所以我们可以在这个时间点进行上报。

第二点，可以在 LCP 事件触发后再进行上报。不管是同步还是异步加载的 DOM，它都需要进行绘制，所以可以监听 LCP 事件，在该事件触发后才允许进行上报。

let isOnLoaded = false
executeAfterLoad(() => {
    isOnLoaded = true
})


let timer
let observer
function checkDOMChange() {
    clearTimeout(timer)
    timer = setTimeout(() => {
        // 等 load、lcp 事件触发后并且 DOM 树不再变化时，计算首屏渲染时间
        if (isOnLoaded && isLCPDone()) {
            observer && observer.disconnect()
            lazyReportCache({
                type: 'performance',
                subType: 'first-screen-paint',
                startTime: getRenderTime(),
                pageURL: getPageURL(),
            })

            entries = null
        } else {
            checkDOMChange()
        }
    }, 500)
}