主要：
加载速度、第一个请求响应时间、页面加载时间、交互动作的反馈时间、帧率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 - domainLookupStartTCP 连接耗时: connectEnd - connectStartSSL 安全连接耗时: connectEnd - secureConnectionStart网络请求耗时 (TTFB): responseStart - requestStart数据传输耗时: responseEnd - responseStartDOM 解析耗时: domInteractive - responseEnd资源加载耗时: loadEventStart - domContentLoadedEventEndFirst Byte时间: responseStart - domainLookupStart白屏时间: responseEnd - fetchStart首次可交互时间: domInteractive - fetchStartDOM Ready 时间: domContentLoadEventEnd - fetchStart页面完全加载时间: loadEventStart - fetchStarthttp 头部大小： transferSize - encodedBodySize重定向次数：performance.navigation.redirectCount重定向耗时: redirectEnd - redirectStart
延伸阅读
计算首次可交互时间距离：
window.addEventListener('load', (event) => {// Time to Interactivelet timing = performance.getEntriesByType('navigation')[0];// let timing = performance.timingconsole.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 taskobserver.observe({entryTypes: ['longtask']})
监听页面可见性的状态
let vEvent = 'visibilitychange';if (document.webkitHidden != undefined) {// webkit prefix detectedvEvent = '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);
通过判断用户网络状态，可以做一些针对性的加载，比如用户网络状态好，就可以加载一些更加高清的图片，反之加载一些质量更差的图片等等。
