说一说性能优化有哪些性能指标，如何量化？

得分点

加载速度、第一个请求响应时间、页面加载时间、交互动作的反馈时间、帧率FPS、异步请求完成时间 Lighthouse、Throttling 、Performance、Network、WebPageTest

参考答案

标准回答

常用的性能优化指标

• Speed Index（lighthouse，速度指数）
• TTFB（Network，第一个请求响应时间）
• 页面加载时间
• 首次渲染
• 交互动作的反馈时间
• 帧率FPS（动画 ctrl+shift+p）
• 异步请求完成时间

使用性能测量工具进行量化

• Chrome DevTools
  • 开发调试、性能评测
  • Audit(Lighthouse)
  • Throttling 调整网络吞吐
  • Performance 性能分析
  • Network 网络加载分析
• Lighthouse
  • 网站整体质量评估
  • 还可以提出优化建议
• WebPageTest
  • 测试多地点(球各地的用户访问你的网站的性能情况)
  • 全面性能报告（first view,repeat view,waterfall chart 等等）
  • WebPageTest 还可以进行本地安装，让你的应用在还没上线的时候就可以测试。

加分回答

常用的性能测量API

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

延伸阅读

计算首次可交互时间距离

window.addEventListener('load', (event) => {
    // Time to Interactive
    let timing = performance.getEntriesByType('navigation')[0];
    // let timing = performance.timing
    console.log(timing.domInteractive);
    console.log(timing.fetchStart);
    let diff = timing.domInteractive - timing.fetchStart;
    console.log("TTI: " + dff);
})

观察长任务（long tasks）

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

监听页面可见性的状态

let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
    // webkit prefix detected
    vEvent = 'webkitvisibilitychange';
}

function visibilityChanged() {
    if (document.hidden || document.webkitHidden) {
        console.log("Web page is hidden.")
    } else {
        console.log("Web page is visible.")
    }
}

document.addEventListener(vEvent, visibilityChanged, false);

通过监听页面可见性的状态可以判断用户是否在看当前页面，可以做一些处理，比如视频暂停，保存状态等等

判断用户网络状态

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

通过判断用户网络状态，可以做一些针对性的加载，比如用户网络状态好，就可以加载一些更加高清的图片，反之加载一些质量更差的图片等等。