关于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)    }}