js白屏检测与白屏的修正机制

白屏检测的实现

关键点采样对比,利用的就是 document.elementsFromPoint(x,y) （https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint）这个函数返回特定坐标点下的HTML元素数组。

在各种社区、文章中其实已经有不少介绍利用这个API完成白屏检测的文章，方案很多，例如：【垂直选取】、【交叉选取】、【垂直交叉选取】、【页面网格深度采集】等等。

mirror选择了比较普遍的垂直选取。大致的原因是我们觉得白屏的检测在确保准确度、复杂度和性能消耗之间我们需要一个平衡点。 垂直选取的策略适用于大多数业务。

垂直选取示意

for (let i=1; i<=9;i+=2){    const xElements = document.elementsFromPoint((window.innerWidth * i) / 10, _global.innerHeight / 2)    const yElements = document.elementsFromPoint(_window.innerWidth / 2, (_global.innerHeight * i) / 10)}

获取垂直选点的代码示例

从垂直可以延伸出上文所说的交叉、垂直交叉等等方案，本质是一样的，区别在于页面获取更多的点位，返回的是这个点的dom层级，经过一些列的遍历后可以寻找是否有对应的class或者id、标签等等。

页面网格深度采集更类似于把整体页面分为多个相同的块，利用DOM层级深度来显示页面的复杂度和某个模块是否正常运行。

这个检测的功能更适用于一些特定的场景和复杂业务的特殊定制化需求，我们也是有别的团队的同学基于mirror给出的生命周期插件入口完成了拓展功能。

白屏的修正机制

在第一次检测白屏的情况出现时，浏览器的整体渲染可能还没有完成，特别是移动端页面。用户糟糕的网络环境、关键JS资源或接口还没有返回的情况都是导致页面白屏的可能原因。这时我们就需要一个轮询检测机制,去检测白屏的正确性。这个就是修正机制

修正机制的大致示意图