前端性能优化之 Web 性能优化、性能指标和优化目标、RAIL 测量模型和常用的性能测量 APIs

一、Web 性能优化

1. 进行 Web 性能优化，因为性能是 Web 网站和应用的支柱，流量、搜索、转换率和用户体验的关系。
2. 寻找性能瓶颈，如下所示：

• 了解性能指标，多快才算快
• 利用测量工具和 APIs
• 优化问题，重新测量迭代

3. 移动端挑战多，如下所示：

• 设备硬件、网速、屏幕尺寸、交互方式
• 用户更缺少耐心，大于 3 秒加载导致 53% 的跳出率
• 持续增长的移动用户和移动电商业务

二、性能指标和优化目标

1. 性能优化加载，如下所示：

• 理解加载瀑布图
• 基于 HAR 存储与重建性能信息
• 速度指数 Speed Index
• 重要测量指标，如 Speed Index、TTFB、页面加载时间和首次渲染

2. 性能优化响应，如下所示：

• 交互动作的反馈时间
• 帧率 FPS，如 60FPS
• 异步请求的完成时间

三、RAIL 测量模型

1. RAIL 测量模型，如下所示：

• Response 响应
• Animation 动画
• Idle 空闲
• Load 加载

2. RAIL 的目标是良好的用户体验成为性能优化的目标。
3. RAIL 评估标准，如下所示：

• 响应，处理事件应在 50ms 以内完成
• 动画，每 10ms 产生一帧
• 空闲，尽可能增加空闲时间
• 加载，在 5s 内完成内容加载并可以交互

4. 性能测量工具，如下所示：

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

5. 解读 WebPageTest 的报告，如下所示：

• waterfall chart 请求瀑布图
• first view 首次访问
• repeat view 二次访问

6. WebPageTest，如下所示：

• 在线进行网站性能分析
• 本地部署 WebPageTest 工具

7. 使用 Lighthouse 分析性能，如下所示：

• 通过 npm install -g lighthouse 命令下载 lighthouse
• 直接以 lighthouse 测试地址 就可以了，如 lighthouse http://www.baidu.com
• 测试成功后会生成一个文件保存在本地，直接打开就可以看到测试性能报告

8. 使用 Chrome DevTools 进行性能测试，如下所示：

• Audit(Lighthouse)
• Throttling 调整网络吞吐
• Performance 性能分析
• Network 网络加载分析

四、常用的性能测量 APIs

1. Web 标准 APIs，如下所示：

• 关键时间节点，Navigation Timing、Resource Timing
• 网络状态 Network APIs
• 客户端服务端协商 HTTP Client Hints 和网页显示状态 UI APIs

2. 对于常用标准的计算，如下所示：

• 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

3. 关于计算指标的实例，如下所示：

• ttl 时间，代码如下所示：

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

• 观察长任务，代码如下所示：

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry)
    }
})

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);