前端性能优化的指标与工具

1 性能指标和优化目标

RAIL评估标标准

• Respond（响应）：处理事件应在50ms以内完成
• Animation（动画）：每10ms产生一帧
• Idle（空闲）：尽可能增加空闲时间
• Load（加载）：在5s之内完成内容的加载

性能测试工具

• Chrome DevTools 开发调试，性能评测
• Lighthouse 网站整体质量评估
• WebPageTest 多测试地点，全面的性能报告

使用Chrome DevTools 进行性能优化测试

• Audit（lighthouse）
• Throttling 调整网络吞吐
• Performance 性能分析
• Network 网络加载分析

常用的性能测量APIs

1. performance.getEntriseByType(“navigation”)[0]

• DNS 解析耗时: domainLookupEnd – domainLookupStart
• TCP 连接耗时: connectEnd – connectStart
• SSL 安全连接耗时: connectEnd – secureConnectionStart
• 网络请求耗时 (TTFB): responseStart – requestStart
• 数据传输耗时: responseEnd – responseStart
• DOM 解析耗时: domInteractive – responseEnd
• 资源加载耗时: loadEventStart – domContentLoadedEventEnd
• First Byte时间: responseStart – domainLookupStart
• 白屏时间: responseEnd – fetchStart
• 首次可交互时间: domInteractive – fetchStart
• DOM Ready 时间: domContentLoadEventEnd – fetchStart
• 页面完全加载时间: loadEventStart – fetchStart
• http 头部大小： transferSize – encodedBodySize
• 重定向次数：performance.navigation.redirectCount
• 重定向耗时: redirectEnd – redirectStart

2. PerformanceObserver

//通过PerformanceObserver得到所有的long tasks对象
let observer = new PerformanceObserver((list)=>{
    for(const entry of list.getEntries()){
        console.log(entry)
    }
})
//监听long tasks
observer.observe({entryTypes:['longtask']})
复制代码

3. visibilitychange/webkitvisibilitychang 判断再来浏览页面的api

let vEvent = 'visibilitychange'
if(document.webkitHidden != undefined){
    //webkit 事件名称
    vEvent = 'webkitvisibilitychang'
}
function visibilityChange(){
	// 页面不可见
    if(document.hidden || document.webkitHidden){
        console.log('web page is hidden')
    } else {
        //页面可见
        conlose.log('web page is visibile')
    }
}

document.addEventListener(vEvent, visibilityChange,false)
复制代码

4. navigator.connection 查看网络情况

let connection = naviagtor.connection || navigator.mozConnection || navgator.webkitConnection

let type = connection.effectiveType
function updataConnectionStatus() {
    console.log(connection.effectiveType)
}
connection.addEventListener("change",updataConnectionStatus,false)
复制代码