【JavaScript】关于js中performance性能监控

一，performance中会出现的属性字段：

memory：只有在chrome才有，提供了基本内存的使用情况

navigation：提供了操作的上下文，包括页面的加载，刷新，重定向次数等等

timing：提供了浏览器上下文事件结束的各种UNIX时间戳

二，memory属性

jsHeapSizeLimit：内存大小限制

totalJSHeapSize：可使用的内存大小

usedJSHeapSize：JS对象（包括V8引擎内部对象）占用的内存

三，navigation属性

redirectCount：重定向次数到本页面

type：0 正常页面（非刷新，重定向）1 通过刷新进入 2 通过浏览器前进后退按钮进入

255 非以上方式进入

四，timing属性

connectStart：HTTP域名解析完成的时间

connectEnd：HTTP浏览器与服务器之间连接建立完成的时间

domComplete：DOM文档解析完成，readyState变为complete

domContentLoadedEventStart：所有脚本已经执行完，开始执行DOMContentLoaded方法

domContentLoadedEventEnd：执行DOMContentLoaded方法结束

domInteractive：DOM结构加载结束，开始加载内嵌资源，readyState变为interactive

domLoading：DOM结构开始解析，readyState开始是loading

domainLookupStart：DNS域名查询开始

domainLookupEnd：DNS域名查询结束

fetchStart：浏览器发起任何请求之前的时间戳

loadEventStart：开始加载load事件

loadEventEnd：load事件加载结束

navigationStart：unload上一个文档的时间节点

redirectStart：第一个页面重定向开始的时间

redirectEnd：最后一个页面重定向结束的时间

requestStart：浏览器向服务器发起HTTP请求（包含缓存，本地资源）

responseStart：浏览器从服务器收到HTTP请求返回的第一个字节的时间

responseEnd：浏览器从服务器收到HTTP请求返回的最后一个字节的时间

secureConnectionStart：HTTPS协议握手之前的时间，如果非HTTPS，则为0

unloadEventStart：上一个文档unload事件的开始时间（需要是同源文档，否则为0）

unloadEventEnd：上一个文档unload事件的结束时间（需要是同源文档，否则为0）

五，时间应用

页面加载耗时：loadEventEnd - navigationStart

DNS查询耗时：domainLookupEnd - domainLookupStart

TCP链接完成握手耗时：connectEnd - connectStart

request请求耗时：responseEnd - responseStart

解析DOM树耗时：domComplete - domInteractive

白屏时间：domloading - fetchStart

DOMReady可操作时间：domContentLoadedEventEnd - fetchStart

onload总下载时间：loadEventEnd - fetchStart

重定向时间：redirectEnd - redirectStart

六，performance通用方法

performance.now()

根据navigation属性，开始计算毫秒数，通过两次时间相减可以计算某个操作的间隔时间

performance.mark(name)

基于name在浏览器的性能输入缓冲区中存入一个timestamp，可以多次重复录入，

可以使用performance.getEntriesByName()获取到对应的Array，

可以使用performance.clearMarks()清除

七，最后是时间关系图（W3C）

【JavaScript】关于js中performance性能监控相关推荐

【JavaScript】js中的原型继承
文章目录 1. 理解继承 2. js中的继承(原型继承) 3. js6种继承方式 3.1 原型链继承 3.2 盗用构造函数 3.3 组合继承 3.4 原型式继承 3.5 寄生式继承 3.6 寄生式组合 ...
[转]JavaScript/Node.JS 中的 Promises
JavaScript Promises 初体验 Promise 是什么? Promise 对象用来进行延迟(deferred) 和异步(asynchronous) 计算. 一个 Promise 处于 ...
初学JavaScript：js中的对象（对象+原型对象）
文章目录 js对象详解 1.创建对象字面量模式创建对象构造函数模式创建对象 2.访问对象访问属性访问方法 3.遍历对象中的属性和属性值 4.往对象中新添属性 5.删除对象中的属性 6.Obje ...
[JavaScript] 探索JS中的函数秘密
函数长啥样? 把一些要重复使用的内容封装到函数内. function foo(title) {console.log(title) } foo('title') foo('dust') foo('he ...
jsfor循环终止_【JavaScript】JS中如何跳出循环/结束遍历
直接抛结论,下表是JS中常用的实现循环遍历的方法的跳出/结束遍历的办法,经过测试后的总结.可能各位大佬还有其他的办法,我在此表示大佬NB. 序号方法 break continue return re ...
浏览器Performance性能监控使用详解
文章目录 1.Performance 2.测试性能操作流程 3.Performance检测结果详解区域1:controls[控制栏] 区域2:overview[网页性能总览图] 区域3:火焰图[各项 ...
performance性能监控
详细看MDN上 setTimeout(() => {const {fetchStart, // 开始访问requestStart, // 请求的开始responseStart, // 响应的开始 ...
【JavaScript】JS中的预解析
JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行(按顺序从上到下). 预解析:js引擎会把js里面所有的var和function提升到当前作用域的最前面. ...
【JavaScript】js中内存泄漏的几种情况？
文章目录一.是什么二.垃圾回收机制标记清除引用计数小结三.常见内存泄露情况参考文献一.是什么内存泄漏(Memory leak)是在计算机科学中,由于疏忽或错误造成程序未能释放已经不再 ...

【JavaScript】关于js中performance性能监控

【JavaScript】关于js中performance性能监控相关推荐

最新文章

热门文章