前端代码性能质量监测

1.页面总体性能

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

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

能够经过只读属性Performance.timing 得到实现该接口的一个对象。跨域

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

详情以下:浏览器

https://developer.mozilla.org...缓存

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

  • PerformanceTiming.navigationStart 只读服务器

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

  • 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...
TB1i.G4SpXXXXb1aFXXXXXXXXXX-2534-1134.jpg

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

相关文章
相关标签/搜索