前端监控系统白屏检测 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第2天，我们小组的组队大项目为前端监控系统，其中白屏检测为我负责的模块之一，本次笔记记录一下本模块的开发进度。

一、页面出现白屏的原因

1.css或js的加载问题。不正确的引入css或js会造成页面渲染阻塞的问题，例如在body开头引入js，由于代码的处理顺序为从上到下，在html元素前引入js可能会导致在js代码执行完成前对其他资源的加载就行阻塞，从而导致页面卡顿甚至白屏。 2.网络问题。在网络连接通畅的情况下，造成白屏的原因可能有url地址错误、接口请求返回信息有误、请求资源体积过大链接加载超时等原因。

二、检测白屏的方案

先定义一个包装元素的数组，数组中包含html、body以及页面自定义的元素容器类名机器id，并通过在页面均匀分布点位用elementsFromPoint()方法进行元素检测，如果检测出空点的个数大于16则向后台发送报错信息，代码实现如下：

    onloadHook(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]);
        }
        if(emptyPoints > 16){
            let centerPoint = document.elementsFromPoint(window.innerWidth / 2, window.innerHeight / 2)[0];
            request.send({
                kind: 'stability',
                type: 'blankScreen',
                emptyPoints,
                screen: `${window.screen.width}x${window.screen.height}`,
                viewPort: `${window.innerWidth}x${window.innerHeight}`,
                selector: getSelector(centerPoint)
            })
        }
    })

具体实现方法及对页面进行逐点排查，如某点检测到的元素为定义元素中的值则判定该点为空点，变量 emptyPoints++，其中点位分布密度可以自行设置，本次选择为均匀分布的18个点位，实现页面筛查和空点数自增的代码实现如下：

    function getSelector(element){
        if(element.id){
            return `#${element.id}`
        } else if(element.className){
            return `.${element.className}`
        } else{
            return element.nodeName.toLowerCase();
        }
    }

    function isWrapper(element) {
        let selector = getSelector(element);
        if(wrapperElements.includes(selector)){
            emptyPoints++;
        }
    }

本次白屏探针总结如上。