对页面采样判断检测白屏-技术圈

一、为什么需要检测白屏

白屏是最严重的生产事故之一，如果大量发生，将直接导致业务瘫痪。页面白屏，绝对是让前端开发者最为胆寒的事情，特别是随着 SPA 项目的盛行，前端白屏的情况变得更为复杂且棘手起来。

复现难度高，面对这样的问题，内心很虚，因为导致白屏出现的原因非常多，这不是一个明确的错误，如果没有好用的监控工具，真不知道该从何入手。

二、分析有哪些情况下会产生白屏

想要检测白屏就需要先分析会产生白屏的场景，然后对症下药。

1.第一种：页面加载期间，js代码报错，直接导致白屏；这种白屏常见于开发阶段，也最容易被发现的，一般情况下不会被带到生产环境。2.第二种：静态资源加载失败，关键js文件无法被引入，导致白屏；为了让页面加载更快，大部分公司都会选择将静态资源文件上传到自己的CDN服务器或者第三方CDN服务器，如果CDN服务器出现波动，就会导致白屏产生。3.第三种：接口无法返回正常结果，或者返回空结果，导致页面无法渲染数据，出现白屏、缺省屏或骨架屏等；缺省状态和骨架屏从某种意义上看也是属于业务白屏的一种。4.第四种：页面本来是好好的，但是点击按钮后，出现报错，导致页面白屏，这种情况是不易发现的，白屏效果跟第一种是相同的。

方法1：检查DOM根节点是否有内容；

原理很简单，在当前主流的三大框架中，DOM 一般都会挂载在一个根节点之下（比如

），发生白屏后通常是根节点下所有 DOM 被卸载，该方法通过检测根节点下是否挂载 DOM，若无则证明白屏

这是一种简单明了且有效的方案，但缺点也很明显：其一切建立在白屏 === 根节点下 DOM 被卸载成立的前提下，缺点是通用性较差，对于有骨架屏的情况束手无策。

方法2：Mutation Observer 监听 DOM 变化；

通过此MutationObserver.MutationObserver API 监听页面 DOM 变化，每当被指定的节点或子树以及配置项有 DOM 变动时都可以监听到

但这个方法有两个问题：

1）白屏不一定是 DOM 被卸载，也有可能是压根没渲染，比如js代码报错，刚进来就是白屏的，

2）遇到有骨架屏的项目，若页面从始至终就没变化，一直显示骨架屏，这种情况 Mutation Observer 也无法做到准确判断

方法3：页面截图检测

首先对页面进行截图，将截图与一张纯白的图片做对比，判断两者是否足够相似，或者根据图片截图的大小来判断。

但这个方案有两个缺陷：

1、方案较为复杂，性能不高；一方面需要借助 canvas 实现前端截屏，同时需要借助复杂的算法对图片进行对比

2、通用性较差，对于有骨架屏或者有占位符的项目，对比的效果就会出现明显的差异

方法4：对页面采样判断

采样对比+白屏修正机制是目前比较主流的方式。可以使用 document.elementsFromPoint() 方法来检测页面是否出现白屏。这个方法可以返回位于指定坐标点下的所有元素。通过检查返回的元素集合，你可以判断页面在特定坐标点下是否有元素显示，从而间接判断页面是否出现白屏。

以下是使用 document.elementsFromPoint() 方法来检测页面白屏的基本示例：

function isPageBlank() {    const x = 10; // 指定检测点的横坐标    const y = 10; // 指定检测点的纵坐标
    const elements = document.elementsFromPoint(x, y);
    if (elements.length === 0) {        console.log('页面在指定坐标点下出现白屏');        return true;    } else {        console.log('页面在指定坐标点下有元素显示');        return false;    }}
// 调用函数检测页面是否出现白屏isPageBlank();

在上面的示例中，我们定义了一个函数 isPageBlank()，该函数通过调用 document.elementsFromPoint() 方法来检测页面在指定坐标点下是否出现白屏。如果返回的元素集合为空，即没有元素显示在指定坐标点下，就可以判断页面出现了白屏。