前端代码性能质量监测 | 易学教程

1.页面整体性能

通过浏览器提供的 window.performance.timing 方法，我们能够得到网页每个处理阶段的精确时间。打开一个页面后，这些信息会被浏览器记录下来，我们直接在控制台输出，就可以查看结果

PerformanceTiming 接口包含了当前页面中与时间相关的信息。

可以通过只读属性Performance.timing 获得实现该接口的一个对象。

var timing = window.Performance.timing;
console.log(timing);

详情如下：

https://developer.mozilla.org...

PerformanceTiming 接口不包含任何继承属性。

PerformanceTiming.navigationStart 只读

是一个无符号long long 型的毫秒数，表征了从同一个浏览器上下文的上一个文档卸载(unload)结束时的UNIX时间戳。如果没有上一个文档，这个值会和PerformanceTiming.fetchStart相同。

PerformanceTiming.unloadEventStart 只读

是一个无符号long long 型的毫秒数，表征了unload事件抛出时的UNIX时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回0.

PerformanceTiming.unloadEventEnd 只读

是一个无符号long long 型的毫秒数，表征了unload事件处理完成时的UNIX时间戳。如果没有上一个文档，or if the previous document, or one of the needed redirects, is not of the same origin, 这个值会返回0.

PerformanceTiming.redirectStart 只读

是一个无符号long long 型的毫秒数，表征了第一个HTTP重定向开始时的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.

PerformanceTiming.redirectEnd 只读

是一个无符号long long 型的毫秒数，表征了最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的UNIX时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0.

PerformanceTiming.fetchStart 只读

是一个无符号long long 型的毫秒数，表征了浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这个时间点会在检查任何应用缓存之前。

PerformanceTiming.domainLookupStart 只读

是一个无符号long long 型的毫秒数，表征了域名查询开始的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。

PerformanceTiming.domainLookupEnd 只读

是一个无符号long long 型的毫秒数，表征了域名查询结束的UNIX时间戳。如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 PerformanceTiming.fetchStart一致。

PerformanceTiming.connectStart 只读

是一个无符号long long 型的毫秒数，返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。如果使用持久连接（persistent connection），则返回值等同于fetchStart属性的值。

PerformanceTiming.connectEnd 只读

是一个无符号long long 型的毫秒数，返回浏览器与服务器之间的连接建立时的Unix毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。

PerformanceTiming.secureConnectionStart 只读

是一个无符号long long 型的毫秒数，返回浏览器与服务器开始安全链接的握手时的Unix毫秒时间戳。如果当前网页不要求安全连接，则返回0。

PerformanceTiming.requestStart 只读

是一个无符号long long 型的毫秒数，返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。

PerformanceTiming.responseStart 只读

是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。

PerformanceTiming.responseEnd 只读

是一个无符号long long 型的毫秒数，返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的Unix毫秒时间戳。

PerformanceTiming.domLoading 只读

是一个无符号long long 型的毫秒数，返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的Unix毫秒时间戳。

PerformanceTiming.domInteractive 只读

是一个无符号long long 型的毫秒数，返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。

PerformanceTiming.domContentLoadedEventStart 只读

是一个无符号long long 型的毫秒数，返回当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的Unix毫秒时间戳。

PerformanceTiming.domContentLoadedEventEnd 只读

是一个无符号long long 型的毫秒数，返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的Unix毫秒时间戳。

PerformanceTiming.domComplete 只读

是一个无符号long long 型的毫秒数，返回当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的Unix毫秒时间戳。

PerformanceTiming.loadEventStart 只读

是一个无符号long long 型的毫秒数，返回该文档下，load事件被发送时的Unix毫秒时间戳。如果这个事件还未被发送，它的值将会是0。

PerformanceTiming.loadEventEnd 只读

是一个无符号long long 型的毫秒数，返回当load事件结束，即加载事件完成时的Unix毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.

performance支持情况

http://caniuse.com/#search=pe...

2.window.onerror

使用 window.onerror

https://developer.mozilla.org...

函数参数：

message：错误信息（字符串）。Available as event (sic!) in HTML onerror="" handler.

source：发生错误的脚本URL（字符串）

lineno：发生错误的行号（数字）

colno：发生错误的列号（数字）

error：Error对象（对象）

若该函数返回true，则阻止执行默认事件处理函数。

通过在 window.onerror 上定义一个事件监听函数，程序中代码产生的错误就会被 window.onerror 上面注册的监听函数捕获到，通常我们会这样实现一个 onerror 的函数

window.onerror = function(msg, url, line, col, error){
        var errInfo = {};

        errInfo.msg = msg;// 错误信息
        errInfo.url = url;//错误文件路径
        errInfo.line = line;//行号，压缩过后，然并卵
        errInfo.col = col;//列号

        if (error && error.stack) {
          errInfo.stack = error.stack;
        }
        // 把错误信息发送到后台服务器 
           sendLog(errorInfo);
        return true;
    };
function sendLog(log){
    var img = new Image();
    img.src="url?errorInfo="+encodeURIComponent(JSON.stringify(log));
}

3.Script error的解决办法

当加载自不同域的脚本中发生语法(?)错误时，为避免信息泄露（参见bug 363897），语法错误的细节将不会报告，而代之简单的"Script error."。在某些浏览器中，通过在<script>使用crossorigin属性并要求服务器发送适当的CORS HTTP响应头，该行为可被覆盖。

ex：

html的url为www.taobao.com; js路径为https://g.alicdn.com/xxx.js
遇到这样的报错。这是浏览器出于安全性的考虑，在加载非同源的JS文件时会隐藏部分信息，包括我们此处想要取得的错误信息，并给出一个统一的 Script error 提示，想要解决这个问题，我们需要浏览器端和服务端都做相应的调整

服务器端：

header('Access-Control-Allow-Origin: *');

也可以直接更改nginx的配置允许跨域引用

客户端：

<script src = 'https://blog.sentry.io/js/script.js' crossorigin></script>

服务端必须加允许跨域引用，否则这段js不会执行。。。
更多信息请移步本人博客 https://www.56way.com/p/106.html

来源：https://www.cnblogs.com/jlfw/p/12219061.html

标签