这周学习了一波前端性能分析和前端报错上传，当一个项目完成时，UI炫酷功能强大，却卡在性能瓶颈，势必会令项目黯然失色。并且当项目上线之后，如果无法进行错误的有效收集和定位，势必会给排查bug造成很大的困难。
说起前端性能指标，基础的有白屏时间，首屏时间，用户可操作，总下载时间，这里说一下基本概念：
- 白屏时间： 指用户首次看到内容的时间，一般会在head标签起始和结束位置做埋点
- 首屏时间：出现在视窗内所有资源加载完毕的时间，加载页面时开始统计，统计首屏所有图片加载时间（绑定load事件统计），页面加载完后判断图片是否在首屏内，找出最慢的一张；页面如果存在iframe，也要判断它的加载时间；
- 用户可操作时间：默认可以统计domready时间，因为通常会在这时候绑定事件操作。对于使用了模块化异步加载的 JS 可以在代码中去主动标记重要 JS 的加载时间，这也是产品指标的统计方式。对于React而言，也就是componentDidMount。
- 总下载时间：默认可以统计onload时间，这样可以统计同步加载的资源全部加载完的耗时。如果页面中存在很多异步渲染，可以将异步渲染全部完成的时间作为总下载时间。对异步渲染的代码进行埋点，耗时最长的则为总下载时间。
可以使用window.performance监测以上性能
performance接口的常用计算:
- DNS查询耗时 ：domainLookupEnd - domainLookupStart
- TCP链接耗时 ：connectEnd - connectStart
- request请求耗时 ：responseEnd - responseStart
- 解析dom树耗时 ： domComplete - domInteractive
- 白屏时间 ：responseStart - navigationStart
- domready时间(用户可操作时间节点) ：domContentLoadedEventEnd - navigationStart
- onload时间(总下载时间) ：loadEventEnd - navigationStart
监控错误：前端的错误监控和上报有几个知识点
捕获错误的脚本要放置在最前面，确保可以收集到错误信息，以免被错误脚本报错阻碍
前端错误类型：
1. 资源加载失败，样式、图片、脚本文件的请求异常，比如文件或者图片加载404了
解决方法，使用window.addEventListener的捕获方式可以获取报错信息： "HttpError at " + (e.target.baseURI || location.href) + " outerHTML:" + e.target.outerHTML
2. js脚本异常,即控制台常见的Error信息
3. 检测HTML劫持，比如被运营商强行注入标签或脚本
4. 页面样式丢失，CSS 展现异常
window.addEventListener方法使用
window.addEventListener('error'), function(e) {}, true
- 异常的提示信息，会直接告诉你是什么异常。这是识别一个异常的最重要依据，即e.message中的信息；
- JS 文件名：异常发生在那个文件中。是堆栈信息中最顶层的那个文件。即e.filename。
- 异常所在行、列：异常的具体位置。行信息各浏览器基本还是一致的，列信息的差别较大，仅供参考。
- 堆栈信息：异常信息发生的堆栈，也是函数调用的堆栈信息，每下一层都是上一层的运行环境。即e.error.stack。每一层都包含类型、文件、行、列信息。但是注意堆栈信息可能会比较多，可以根据需要截取上报。safari和firfox的e.error.stack中不包含以上1，2，3的信息，只有堆栈信息，而chrome和IE中都包含，此处需要做兼容处理。
- 发生异常的设备信息，可以从window.navigator中选取自己需要的信息，或者直接使用window.navigator.userAgent
前端异常捕获方法使用：
- window.onerror()能捕获到的异常，当然如果用addEventListener无论冒泡还是捕获阶段也能捕获到该异常。
- 只有在window.onerror()中return true 错误信息才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。
- window.onerror()无法捕获网络错误，由于网络请求异常不会事件冒泡，因此必须在捕获阶段将其捕捉到才行，但是这种方式虽然可以捕捉到网络请求的异常，但是无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以
4.资源加载失败也就是网络错误的一种，即<img>、<script>标签上的onerror，这个异常无法通过冒泡到达window，但是可以在捕获阶段拿到，这就是为什么要将addEventListener第三个参数置成true了。这个报错收集非常必要，不然用户访问网站，图片 CDN 无法服务，图片加载不出来而开发人员没有察觉就尴尬了。
5.捕获到错误后，阻止错误在控制台展示，线上自行收集错误信息以防外人看到
window.addEventListener('error', (function(e) {
console.log("-----errorEvent----", e)
e.preventDefault() //这里换成 return false或return true均不行！
}), true);
window.onerror = function(msg, url, line, col, error) {
console.log("------errorInfo---",msg, url, line, col, error)
return true; //这里用return false不行！
}
- 关于Promise错误：有时候promise没有写catch语句，这个报错onerror并不能捕获，最好添加一个 Promise 全局异常捕获事件 unhandledrejection
window.addEventListener("unhandledrejection", function(e){
e.preventDefault()
console.log('我知道 promise 的错误了');
console.log(e.reason);
return true;
});
Promise.reject('promise error');
new Promise((resolve, reject) => {
reject('promise error');
});
new Promise((resolve) => {
resolve();
}).then(() => {
throw 'promise error'
});
- 父窗口的onerror事件是无法捕获其中iframe中的JS错误的
Scirpt error
这个就是跨域脚本的问题了，基于安全协议跨域脚本的报错无法接收到具体信息。因为线上的版本，经常做静态资源 CDN 化，这就会导致我们常访问的页面跟脚本文件来自不同的域名，这时候如果没有进行额外的配置，就会容易产生 Script error，解决办法如下：
一：静态资源请求需要加多一个Access-Control-Allow-Origin头部。
二：<scrip>标签加上crossorigin属性
https://www.cnblogs.com/bldxh/p/6857324.html
https://www.cnblogs.com/bldxh/p/6923370.html
https://github.com/happylindz/blog/issues/5
网友评论