使用performance进行网页性能监控 - 恩施安防监控培训学校
由于项目需要, 需要对网页的一些性能进行监控, 接触到了performance,
window.performance 提供了一组精确的数据，经过简单的计算就能得出一些网页性能数据, 将这些数据存储为日志, 可有效的对网页性能进行监控.
首先看一下在Chrome 的控制台执行window.performance会出现什么
下面是对这些属性的详细解释:
1 performance = { memory: { totalJSHeapSize: 10000000, jsHeapSizeLimit: 2190000000 }, navigation: { type: 0 }, 19 20 timing: { navigationStart: 1441112691935, unloadEventStart: 0, unloadEventEnd: 0, redirectStart: 0, redirectEnd: 0, fetchStart: 1441112692155, domainLookupStart: 1441112692155, domainLookupEnd: 1441112692155, connectStart: 1441112692155, connectEnd: 1441112692155, secureConnectionStart: 0, requestStart: 1441112692158, responseStart: 1441112692686, responseEnd: 1441112692687, domLoading: 1441112692690, domInteractive: 1441112693093, domContentLoadedEventStart: 1441112693093, domContentLoadedEventEnd: 1441112693101, domComplete: 1441112693214, loadEventStart: 1441112693214, loadEventEnd: 1441112693215 96 } 97 };
通过这些属性, 能够计算出一些重要的网页性能数据:
// 计算加载时间 function getPerformanceTiming () { var performance = window.performance; if (!performance) { // 当前浏览器不支持 return; } var t = performance.timing; var times = {}; //页面加载完成的时间 times.loadPage = t.loadEventEnd - t.navigationStart; //【重要】解析 DOM 树结构的时间 times.domReady = t.domComplete - t.responseEnd; //【重要】重定向的时间 times.redirect = t.redirectEnd - t.redirectStart; //【重要】DNS 查询时间 times.lookupDomain = t.domainLookupEnd - t.domainLookupStart; //【重要】读取页面第一个字节的时间 // TTFB 即 Time To First Byte times.ttfb = t.responseStart - t.navigationStart; //【重要】内容加载完成的时间 times.request = t.responseEnd - t.requestStart; //【重要】执行 onload 回调函数的时间 //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？ times.loadEvent = t.loadEventEnd - t.loadEventStart; // DNS 缓存时间 times.appcache = t.domainLookupStart - t.fetchStart; // 卸载页面的时间 times.unloadEvent = t.unloadEventEnd - t.unloadEventStart; // TCP 建立连接完成握手的时间 times.connect = t.connectEnd - t.connectStart; return times; }
Performance还提供了一些方法供使用
Performance.now()
返回一个 时间戳，表示从参考时刻开始经过的毫秒量
该时间戳的值是从 window.performance.timing 接口的navigationStart属性中的时间戳值为起始点开始计时的.
和JavaScript中其他可用的时间类函数(比如Date.now)不同的是,window.performance.now()返回的时间戳没有被限制在一毫秒的精确度内,而它使用了一个浮点数来达到微秒级别的精确度.
另外一个不同点是,window.performance.now()是以一个恒定的速率慢慢增加的,它不会受到系统时间的影响(可能被其他软件调整)
使用示例:
let t0 = window.performance.now(); doSomething(); let t1 = window.performance.now(); console.log("doSomething函数执行了" + (t1 - t0) + "毫秒.")
Performance.mark()
在浏览器的性能输入缓冲区中创建一个 timestamp，基于给定的 name
示例:
function create_mark(name) { if (performance.mark === undefined) { console.log("performance.mark Not supported"); return; } // Create the performance mark performance.mark(name); // mark 方法是可以创建多条同名 performanceEntry 的，例如: // performance.mark("begin") // performance.mark("begin") // performance.mark("begin") // performance.mark("begin") // performance.getEntriesByName("begin") // [...] // 0: PerformanceMark { name: "begin", entryType: "mark", startTime: 94661370.14, … } // 1: PerformanceMark { name: "begin", entryType: "mark", startTime: 95542853.4, … } // 2: PerformanceMark { name: "begin", entryType: "mark", startTime: 95545560.92, … } // 3: PerformanceMark { name: "begin", entryType: "mark", startTime: 95548089.94, … } // length: 4 // __proto__: Array [] }
Performance.clearMarks()
移除给定的 mark，从浏览器的性能输入缓冲区中
下面的例子演示clearMarks() 的两种用法。
function clear_mark(name) { if (performance.clearMarks === undefined) { console.log("performance.clearMarks Not supported"); return; } //移除所有标记了此名称的peformance entry performance.clearMarks(name); } function clear_all_marks() { if (performance.clearMarks === undefined) { console.log("performance.clearMarks Not supported"); return; } //从performance 缓冲区中移除所有标记的performance entry performance.clearMarks(); }
Performance.clearMeasures()
移除给定的 measure，从浏览器的性能输入缓冲区中
Performance.clearResourceTimings()
移除所有的 entryType 是 "resource" 的 performance entries，从浏览器的性能数据缓冲区中
Performance.getEntries()
返回一个 PerformanceEntry 对象的列表，基于给定的 filter
Performance.getEntriesByName()
返回一个 PerformanceEntry 对象的列表，基于给定的 name 和 entry type
Performance.getEntriesByType()
返回一个 PerformanceEntry 对象的列表，基于给定的 entry type
Performance.measure()
在浏览器的指定 start mark 和 end mark 间的性能输入缓冲区中创建一个指定的 timestamp
Performance.setResourceTimingBufferSize()
将浏览器的资源 timing 缓冲区的大小设置为 "resource" type performance entry 对象的指定数量
Performance.toJSON()
是一个 JSON 格式转化器，返回 Performance 对象的 JSON 对象
使用performance的这些属性和方法, 能够准确的记录下我们想要的时间, 再加上日志采集等功能的辅助，我们就能很容易的掌握自己网站的各项性能指标了.
百度收录查询：使用performance进行网页性能监控 - 恩施安防监控培训学校
