1、Javascript组成包含以下3个局部：
ECMAScript(外围)形容了JS的语法和根本对象。文档对象模型 （DOM）解决网页内容的办法和接口浏览器对象模型（BOM）与浏览器交互的办法和接口（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) }}