前端性能分析 ” Performance API “

定义

Performance 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

注意：除了以下指出的情况外，该接口及其成员在 Web Worker 中可用。此外，还需注意，performance 的创建和衡量都是同一环境下的。即，如果你在主线程（或者其他 worker）中创建了一个 performance，那么它在另外的 worker 线程中是不可用的；反之亦然。

Performance API

Navigation Timing: Processing Model

1. Navigation Timing Level 1

2. Navigation Timing Level 2

• 上一个文档卸载
• 重定向
• 浏览器准备好使用http抓取文档
• 检查本地缓存
• 查询DNS域名
• TCP建立连接
• HTTP请求、响应
• 渲染DOM树并解析
• 网页开始加载资源
• 准备就绪触发load事件执行回调函数

性能上报

// onload事件触发 - 等待1s - 上报性能
var page = windows.performance.timing
dns = page.domainLookupEnd - page.domainLookupStart
tcp = page.connectEnd - page.connectStart
// 请求返回时长
connectTime = page.responseEnd - page.requestStart
// 服务端响应时长
responseTime = page.responseEnd - page.responseStart
domAnalysis = page.domComplete - page.domInteractive
// 页面白屏时长
whitePageTime = page.responseStart - page.navigationStart
// Dom渲染时长
domReady = page.domContentLoadedEventEnd - page.navigationStart
// 页面加载所需的总时长
allLoadTime = page.loadEventEnd - page.navigationStart
复制代码

PerformanceNavigation (将废弃)

属性

1. redirectCount： 如果有重定向的话，页面通过几次重定向跳转而来
2. type

方法

1. Performance.getEntries()
2. Performance.getEntriesByType()
3. Performance.getEntriesByName()
4. performance.now() 精准计算程序运行时间

mark、measures 计算程序时间

1. performance.mark() 标记各种时间戳，进行打点
2. performance.measure() 测量
3. performance.clearMarks() 清除打点
4. performance.clearMeasures() 清除测量数据

function randomFunc (n) {  
    if (!n) {
        // 生成一个随机数
        n = ~~(Math.random() * 10000);
    }
    var nameStart = 'markStart' + n; 
    var nameEnd   = 'markEnd' + n; 
    // 函数执行前做个标记
    window.performance.mark(nameStart);
 
    for (var i = 0; i < n; i++) {
        // do nothing
    }
 
    // 函数执行后再做个标记
    window.performance.mark(nameEnd);
 
    // 然后测量这个两个标记间的时间距离，并保存起来
    var name = 'measureRandomFunc' + n;
    window.performance.measure(name, nameStart, nameEnd);
}
 
// 执行三次看看
randomFunc();  
randomFunc();  
// 指定一个名字
randomFunc(888);

// 看下保存起来的标记 mark
window.performance.getEntriesByType('mark')

// 看下保存起来的测量 measure
window.performance.getEntriesByType('measure');

// 清除指定标记
window.performance.clearMarks('markStart888');  
// 清除所有标记
window.performance.clearMarks();
 
// 清除指定测量
window.performance.clearMeasures('measureRandomFunc');  
// 清除所有测量
window.performance.clearMeasures(); 


复制代码

参考文章

1. 初探 performance – 监控网页与程序性能
2. 获取页面加载各个阶段所需时间
3. Navigation Timing Level 2