概述

白屏检测算法用于检测网页是否处于白屏状态，通过在页面视口选取多个检测点，判断这些点对应的元素是否为空或不可见，进而计算空白点占比，与预设阈值比较来确定是否为白屏。此外，算法还支持在页面路由变化时重新检测，并在检测到白屏时提供可视化反馈和向服务器发送白屏计数请求。

算法流程

1. 初始化参数

• 阈值（threshold）：判断为白屏的空白点占比阈值，默认值为 0.8（即 80%）。
• 延迟时间（delay）：延迟检测的时间，默认值为 3000 毫秒。

1. 检测点选取

• 获取当前视口的宽度（viewportWidth）和高度（viewportHeight）。
• 若视口宽度或高度为 0，则直接判定为白屏。
• 选取视口的中心点以及四个角落作为检测点，具体坐标如下：
  • 中心点：[viewportWidth / 2, viewportHeight / 2]
  • 左上角：[0, 0]
  • 右上角：[viewportWidth - 1, 0]
  • 左下角：[0, viewportHeight - 1]
  • 右下角：[viewportWidth - 1, viewportHeight - 1]

1. 检测点判断

• 遍历每个检测点，获取该点坐标下的所有元素（按从顶层到底层顺序）。
• 从这些元素中选取最顶层非 body 和 html 的可见元素。若未找到有效元素，则认为该点为空白点。
• 对于找到的有效元素，判断其是否为空内容元素，若是则认为该点为空白点。判断元素是否为空内容元素的规则如下：
  • 检查元素的文本内容，若不为空则不为空内容元素。
  • 检查元素是否包含图片（<img> 标签），若包含则不为空内容元素。
  • 检查元素是否包含 Canvas 或 SVG 元素，若包含则不为空内容元素。
  • 检查元素是否包含输入元素（如 <input>、<textarea>、<select>），若包含则不为空内容元素。
  • 递归检查元素的子元素（两层），若有可见子元素则不为空内容元素。

1. 计算空白点比例

统计空白点的数量，计算空白点占总检测点数量的比例（blankRatio）。

1. 判断是否为白屏

将计算得到的空白点比例与预设阈值进行比较，若 blankRatio >= threshold，则判定为白屏；否则判定为非白屏。

1. 可视化反馈与服务器交互

• 若检测到白屏，在控制台输出错误信息，弹出警告框，并向服务器发送请求增加白屏计数。
• 若未检测到白屏，在控制台输出页面渲染正常的信息。

1. 路由变化检测

监听页面的路由变化事件（pushState、replaceState 和 popstate），在路由变化时重新进行白屏检测，并根据检测结果提供相应的可视化反馈