当前位置: 首页 > Web前端 > HTML

前端代码性能质量监控

时间:2023-04-02 23:16:50 HTML

1.页面的整体性能通过浏览器提供的window.performance.timing方法,我们可以得到网页各个处理阶段的精确时间。打开一个页面后,浏览器会记录这些信息,我们可以直接在控制台输出,查看结果。PerformanceTiming接口包含当前页面中与时间相关的信息。可以通过只读属性Performance.timing获取实现此接口的对象。vartiming=window.Performance.timing;控制台日志(计时);详情如下:https://developer.mozilla.org...PerformanceTiming接口不包含任何继承属性。PerformanceTiming.navigationStart只读是一个unsignedlonglong毫秒数,表示从同一浏览器上下文中卸载前一个文档结束时的UNIX时间戳。如果没有以前的文件,这个值将与PerformanceTiming.fetchStart相同。PerformanceTiming.unloadEventStart只读是一个unsignedlonglong类型的毫秒数,表示抛出卸载事件时的UNIX时间戳。如果没有之前的文档,或者如果之前的文档,或者需要的重定向之一,不是同源的,这个值将返回0。PerformanceTiming.unloadEventEnd只读是一个unsignedlonglong毫秒,代表UNIX时间戳当卸载事件处理完成。如果没有之前的文档,或者如果之前的文档,或者需要的重定向之一,不是同源的,这个值将返回0。PerformanceTiming.redirectStart只读是一个unsignedlonglong毫秒,代表UNIX时间戳第一个HTTP重定向开始了。如果没有重定向,或者重定向的来源不同,这个值会返回0。PerformanceTiming.redirectEnd只读是一个unsignedlonglong类型的毫秒,表示最后一次HTTP重定向完成的时间(即UNIX时间戳的时间)直接收到HTTP响应的最后一位)。如果没有重定向,或者重定向的来源不同,这个值会返回0。PerformanceTiming.fetchStart只读是一个unsignedlonglong毫秒数,表示浏览器准备好使用HTTP请求来获取(fetch)文档的UNIX时间戳。这一点将在检查任何应用程序缓存之前。PerformanceTiming.domainLookupStart只读是一个unsignedlonglong类型的毫秒,表示开始域查找的UNIX时间戳。如果使用持久连接,或者信息存储在缓存或本地资源中,则此值将与PerformanceTiming.fetchStart保持一致。PerformanceTiming.domainLookupEnd只读是一个unsignedlonglong类型的毫秒,代表域查找结束的UNIX时间戳。如果使用持久连接,或者信息存储在缓存或本地资源中,则此值将与PerformanceTiming.fetchStart保持一致。PerformanceTiming.connectStart只读是一个unsignedlonglong类型的毫秒,返回HTTP请求开始发送到服务器时的Unix毫秒时间戳。如果使用持久连接,则返回值等于fetchStart属性的值。PerformanceTiming.connectEnd只读是一个unsignedlonglong类型的毫秒,返回浏览器和服务器建立连接时的Unix毫秒时间戳。如果建立了持久连接,则返回值等于fetchStart属性的值。连接建立是指所有握手和认证过程结束。PerformanceTiming.secureConnectionStart只读是一个unsignedlonglong类型的毫秒,返回浏览器和服务器开始安全连接握手时的Unix毫秒时间戳。如果当前网页不需要安全连接,则返回0。PerformanceTiming.requestStartread-only是一个unsignedlonglong类型的毫秒,当浏览器向服务器发送HTTP请求时(或者当它开始读取本地缓存时)返回Unix毫秒时间戳。PerformanceTiming.responseStart只读是一个unsignedlonglong类型的毫秒,返回浏览器从服务器接收到第一个字节(或从本地缓存中读取)时的Unix毫秒时间戳。如果发起请求后传输层失败,重新打开连接,则该属性将被计为新请求对应的发起时间。PerformanceTiming.responseEnd只读是一个unsignedlonglong毫秒数,当浏览器从服务器接收(或从本地缓存读取,或从本地资源读取)最后一个字节时返回(如果在HTTP连接关闭之前,返回关闭时的Unix毫秒时间戳,PerformanceTiming.domLoadingread-only是一个unsignedlonglong类型的毫秒,返回当前网页的DOM结构开始解析时(即Document.readyState时)的Unix毫秒时间戳performanceTiming.domInteractiveread-only是unsignedlonglong类型的毫秒,返回当前网页DOM结构结束解析,开始加载嵌入资源的时间(即当Document.readyState属性变为“交互式”并触发相应的readystatechange事件时)Unix毫秒时间戳。PerformanceTiming.domContentLoadedEventStart只读是一个unsignedlonglong类型的毫秒数,返回解析器发送DOMContentLoaded事件时的Unix毫秒时间戳,即所有需要执行的脚本都已经解析完毕。PerformanceTiming.domContentLoadedEventEnd只读是一个unsignedlonglong类型的毫秒数,当所有需要立即执行的脚本都执行完毕时返回Unix毫秒时间戳(与执行顺序无关)。PerformanceTiming.domCompleteread-only是一个unsignedlonglong类型的毫秒,返回当前文档解析完成时的Unix毫秒时间戳,即当Document.readyState变为'complete'并触发相应的readystatechange时。PerformanceTiming.loadEventStartread-only是一个unsignedlonglong类型的毫秒,返回本文件下加载事件发送时的Unix毫秒时间戳。如果事件还没有发送,它的值将为0。PerformanceTiming.loadEventEnd只读是一个unsignedlonglong类型的毫秒,返回加载事件结束时的Unix毫秒时间戳,即加载事件完成时。如果事件还没有发送,或者还没有完成,它的值会是0。性能支持http://caniuse.com/#search=pe...2.window.onerror使用window.onerrorhttps://developer.mozilla.org...函数参数:message:错误信息(字符串)。在HTML中作为事件(原文如此!)可用onerror=""handler.source:发生错误的脚本URL(字符串)lineno:发生错误的行号(数字)colno:发生错误的列号(数字)Object)如果函数返回true,则阻止执行默认事件处理程序。通过在window.onerror上定义一个事件监听函数,程序中代码产生的错误会被注册在window.onerror上的监听函数捕获。通常我们会实现一个onerror函数window.onerror=function(msg,url,line,col,error){varerrInfo={};errInfo.msg=msg;//错误信息errInfo.url=url;//错误文件路径errInfo.line=line;//行号,压缩后,然后AndeggerrInfo.col=col;//列号if(error&&error.stack){errInfo.stack=error.stack;}//向后台服务器发送错误信息sendLog(errorInfo);返回真;};functionsendLog(log){varimg=newImage();img.src="url?errorInfo="+encodeURIComponent(JSON.stringify(log));}3.不同域的脚本加载时出现Scripterror的解决方法当出现语法(?)错误时,避免信息泄露(请参阅错误363897),不会报告语法错误的详细信息,而是简单的“脚本错误”。在某些浏览器中,可以通过使用服务器必须允许跨域-域引用,否则这个js不会被执行。..更多信息,请访问我的博客https://www.56way.com/p/106.html