引言
白屏，可能是某些异常问题，导致页面无法渲染，页面阻塞在白屏状态。而如何利用技术手段来检测当前页面是否白屏，这是本文的重点。
检测方案
业界的一些经典的白屏检测手段，梳理如下。
- 定时检测页面关键 DOM 的是否渲染
- MutationObserver 监听 DOM
- Performance API
- 截图检测
检测关键 DOM 渲染
// 轮训时间可以自己定
let timer = setInterval(checkWhiteScreen, 10 * 1000);
function checkWhiteScreen() {
// 优先判断最关键节点，比如 id#app
const page = document.querySelector('xxx');
if (page) {
return;
}
// 或者判断几个关键的节点。
const domList = domQueryList
.map(domQuery => {
return document.querySelector(domQuery);
})
.filter(dom => !!dom);
const keyDomAllHit =
domList.length > 0 &&
domList.every(dom => {
// ① 判断节点高度
return dom && dom.getBoundingClientRect().height > 10;
// ② 判断节点的长度 textContent or innerText
// dom.innerText.replace(/\n|\s/g, '').length > 10
});
return !keyDomAllHit;
}
监听 DOM 变化
通过 Mutation Observer 监听页面 DOM 变化，如果在设定的时间内 DOM 没有发生变化，就判定为白屏。
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
console.log('Detected ' + mutation.type + ' mutation');
});
});
observer.observe(document, {
attributes: true,
childList: true,
characterData: true,
});
利用 Performance
利用 Performance API 获取到页面加载的各种时间，比如 DOMContentLoaded 事件触发的时间，load 事件触发的时间等，如果这些时间超过预设的时间，就判定为白屏。
window.onload = function () {
var timing = window.performance.timing;
var loadTime = timing.loadEventEnd - timing.navigationStart;
console.log('页面加载时间：' + loadTime);
};
截图
对页面进行截图，转换为像素数组，（全像素/某一区域）检测是不是都是白色。也可以是判断颜色的数量，小于某一个值时认为是白屏。
