前端监控sdk开发（五）白屏检测

引言

在前端开发中，监控用户体验是非常重要的一项工作。其中，检测页面是否白屏是一个关键的指标，它可以帮助我们及时发现页面加载问题，提升用户体验。本文将介绍前端监控SDK中如何检测页面是否白屏的方式。

具体实现

基于DOM元素检测：通过判断页面中是否存在指定的DOM元素来确定页面是否白屏。可以选择一个常见的元素，如<html>或者<body>，然后在页面加载完成后检查该元素是否存在。如果不存在，则说明页面可能出现了白屏问题。

js 复制代码

export function blankScreen() {
  // 定义需要检查的包裹元素
  let wrapperElements = ['html', 'body', '#container', '.content']
  // 记录空白点数
  let emptyPoints = 0

  // 获取元素的选择器
  function getSelector(element) {
    if (element?.id) {
      return '#' + id
    } else if (element?.className) {
      return (
        '.' +
        element.className
          .split(' ')
          .filter((item) => !!item)
          .join('.')
      )
    } else {
      return element?.nodeName.toLowerCase()
    }
  }

  // 判断元素是否为包裹元素
  function isWrapper(element) {
    let selector = getSelector(element)
    if (wrapperElements.indexOf(selector) !== -1) {
      emptyPoints++
    }
  }

  onload(function () {
    // 检查屏幕的点，分别为横向和纵向的点
    for (let i = 1; i <= 9; i++) {
      let xElements = document.elementsFromPoint(
        (window.innerWidth * i) / 10,
        window.innerHeight / 2
      )
      let yElements = document.elementsFromPoint(
        window.innerWidth / 2,
        (window.innerHeight * i) / 10
      )

      isWrapper(xElements[0])
      isWrapper(yElements[0])
    }

    // 如果空白点数超过16个，表示屏幕为空白
    if (emptyPoints > 16) {
      let centerElements = document.elementsFromPoint(
        window.innerWidth / 2,
        window.innerHeight / 2
      )
      tracker.send({
        kind: 'stability',
        type: 'blank',
        emptyPoints,
        screen: window.screen.width + '*' + window.screen.height,
        viewPoint: window.innerWidth + '*' + window.innerHeight,
        selector: getSelector(centerElements[0])
      })
    }
  })
}

定义需要检查的包裹元素：通过定义一个数组 wrapperElements，包含需要检查的元素选择器，如 html、body、#container、.content 等。
记录空白点数：定义一个变量 emptyPoints，用于记录空白点数。
获取元素的选择器：定义一个函数 getSelector(element)，用于根据元素的属性（id、className）获取其选择器。
判断元素是否为包裹元素：定义一个函数 isWrapper(element)，用于判断传入的元素是否为包裹元素。如果是，则将空白点数加一。
页面加载完成后执行操作：使用 onload 函数，在页面加载完成后执行以下操作。
检查屏幕的点：通过循环遍历横向和纵向的点，使用 document.elementsFromPoint() 方法获取该点上最上层的元素。
判断获取到的元素是否为包裹元素：调用 isWrapper() 函数判断获取到的横向和纵向元素是否为包裹元素。
如果空白点数超过16个，表示屏幕为空白：如果空白点数超过16个，则表示屏幕为空白。此时，使用 document.elementsFromPoint() 方法获取屏幕中心点上最上层的元素，并将相关信息发送给追踪器（tracker）进行记录。

这种实现方式通过检查屏幕上的点来判断页面是否为空白。通过定义需要检查的包裹元素、记录空白点数、获取元素的选择器以及判断元素是否为包裹元素等步骤，可以有效地检测页面是否为空白，并进行相应的追踪和记录。

onload.js

一个用于在页面加载完成后执行回调函数的函数。它通过检查 document.readyState 属性来确定页面是否已经完全加载。

js 复制代码

export default function (callback) {
  if (document.readyState === 'complete') {
    callback()
  } else {
    window.addEventListener('load', callback)
  }
}

通过判断 document.readyState 是否等于 'complete' 来确定页面是否已经完全加载。

如果页面已经完全加载，则直接执行回调函数。
如果页面还未完全加载，则使用 window.addEventListener 方法监听 'load' 事件，并在事件触发时执行回调函数。这样，无论是在页面已经完全加载时还是在页面加载完成后，都能确保回调函数被执行。

总结

通过前端监控SDK实现对白屏的监控和优化是前端开发中的重要工作之一。基于DOM元素检测简单直观，但可能存在误判的情况。

还有其他的白屏检测的方式：

基于性能指标检测：通过监控性能指标来判断页面是否白屏。可以使用Performance API来获取关键性能指标，如首次渲染时间、首次可交互时间等。如果这些指标超过了预设的阈值，则说明页面可能出现了白屏问题。
基于截图比对检测：通过对比当前页面的截图和预设的空白页面截图来判断页面是否白屏。可以使用HTML5的Canvas API来实现页面截图功能，并使用图像处理算法进行比对。如果两张截图相似度超过了预设的阈值，则说明页面可能出现了白屏问题。