关于bom:网页性能错误监控

1、Javascript组成包含以下3个局部：

（1） DOM 是 W3C 的规范； [所有浏览器公共恪守的规范]
（2） BOM 是 各个浏览器厂商依据 DOM在各自浏览器上的实现;[体现为不同浏览器定义有差异,实现形式不同]
（3） window 是 BOM 对象，而非 js 对象；javacsript是通过拜访BOM（Browser Object Model）对象来拜访、管制、批改客户端(浏览器)

如图所示（截图W3CSchool目录）：

2、DOM事件流包含三个阶段
（1）. 事件捕捉阶段 : 当事件产生时，首先产生的是事件捕捉，为父元素截获事件提供了机会。它认为当某个事件产生时，父元素应该更早接管到事件，具体元素则最初接管到事件。
（2）. 处于指标阶段 : 事件到了具体元素时，在具体元素上产生，并且被看成冒泡阶段的一部分。随后，冒泡阶段产生，事件开始冒泡，而后逐级流传到较为不具体的节点。
（3）. 事件冒泡阶段 : 事件冒泡过程，是能够被阻止的。避免事件冒泡而带来不必要的谬误和困扰。这个办法就是: stopPropagation()。

当然，因为时代更迭，事件冒泡形式更胜一筹。所以释怀的应用事件冒泡，有非凡须要再应用事件捕捉即可。

<div id="test">
    <button onclick="alert(22)">DOM事件流</button>
</div>

var el = document.getElementById('test')
el.addEventListener('click', function (e) {
   alert(11)
}, true)
el.addEventListener('click', function (e) {
   alert(33)
}, false)

运行后果：网页先后三次弹出警示框，程序为：11 --> 22 --> 33

如图所示（图片源于网络，若侵权请告知）：

3、网页性能参数 performance API

如图所示（图片源于网络，若侵权请告知）：

4、网页谬误监控

5、网页性能、谬误监控代码
monitor.js：需放到head标签先于业务代码执行

// 保留监控信息
let monitor = {
    performance: {}, // 性能监控
    resources: {}, // 资源监控
    errors: [], // 谬误监控

    user: {
        // Screen 对象蕴含无关客户端显示屏幕的信息。
        screen: screen.width, // 屏幕的总宽度
        height: screen.height,
        // Navigator 对象蕴含无关浏览器的信息
        platform: navigator.platform, // 运行浏览器的操作系统
        userAgent: navigator.userAgent, // 浏览器用于 HTTP 申请的UA头的值
        language: navigator.language // 浏览器 UI 的语言
    }
}

// 性能监控
const getPerformance = () => {
    if (!window.performance) return
    const timing = window.performance.timing
    const performance = {
        redirect: timing.redirectEnd - timing.redirectStart, // 最初一个HTTP重定向实现时 - 第一个HTTP重定向开始时
        whiteScreen: timing.domLoading - timing.navigationStart, // 以后网页DOM构造开始解析时 - 上一个文档卸载(unload)完结时
        dom: timing.domComplete - timing.domLoading, // 以后文档解析实现 - 以后网页DOM构造开始解析时
        load: timing.loadEventEnd - timing.navigationStart, // 加载事件实现时 - 上一个文档卸载(unload)完结时
        unload: timing.unloadEventEnd - timing.unloadEventStart, // unload事件处理实现时 - unload事件抛出时
        request: timing.responseEnd - timing.requestStart, // 浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最初一个字节时 - 浏览器向服务器收回HTTP申请时（或开始读取本地缓存时）
        time: new Date().getTime()
    }
    return performance
}

// 资源监控
const getResources = () => {
    if (!window.performance) return
    const data = window.performance.getEntriesByType('resource')
    const resource = {
        xmlhttprequest: [],
        css: [],
        other: [],
        script: [],
        img: [],
        link: [],
        fetch: [],

        time: new Date().getTime()
    }
    data.forEach(item => {
        const arr = resource[item.initiatorType]
        arr && arr.push({
            name: item.name, // 资源URL
            duration: item.duration.toFixed(2), // fetch资源耗时
            size: item.transferSize, // fetch获取资源的大小，遇到本地缓存资源或跨域资源时返回0
            protocol: item.nextHopProtocol // 获取资源的网络协议
        })
    })
    return resource
}


// 谬误监控
addEventListener('error', e => {
    const target = e.target
    console.log(target);
    
    if (target != window) {
        monitor.errors.push({
            type: target.localName,
            url: target.src || target.href,
            msg: (target.src || target.href) + 'is load error',

            time: new Date().getTime()
        })
    }

    console.log('所有的错误信息--捕捉JS执行时谬误、资源加载谬误');
    console.log(monitor.errors);
}, true)

window.onerror =  function (msg, url, row, col, error) {
    monitor.errors.push({
        type: 'javascript',
        row: row,
        col: col,
        msg: error && error.stack ? error.stack : msg,
        url: url,

        time: new Date().getTime()
    })

    console.log('所有的错误信息--捕捉JS执行时谬误');
    console.log(monitor.errors);
}

addEventListener('unhandledrejection', e => {
    monitor.errors.push({
        type: 'promise',
        msg: (e.reason && e.reason.msg) || e.reason || '',

        time: new Date().getTime()
    })

    console.log('所有的错误信息--捕捉Promise异样未处理错误');
    console.log(monitor.errors);
})

window.onload = () => {
    if (window.requestIdleCallback) {
        // requestIdleCallback办法 将在浏览器的闲暇时段内调用的函数排队
        window.requestIdleCallback(() => { 
            monitor.performance = getPerformance()
            monitor.resources = getResources()
            console.log('页面性能信息');
            console.log(monitor.performance)
            console.log('页面资源信息');
            console.log(monitor.resources)
        })
    } else {
        setTimeout(() => {
            monitor.performance = getPerformance()
            monitor.resources = getResources()
            console.log('页面性能信息');
            console.log(monitor.performance)
            console.log('页面资源信息');
            console.log(monitor.resources)
        }, 0)
    }
}