性能优化的相关指标

性能优化-响应：

交互响应：用户与页面的交互足够快

画面流畅（帧率FPS）：画面的帧数达到足够平滑流畅

异步请求速度：异步请求的加载足够快，最好小于1s。如果时间过长需要补充加载动画。

性能优化-加载：

Speed Index：页面内容渲染所消耗的时间（速度指数）

TTFB：请求发送到响应传回所需的时间

页面加载时间：所有资源加载完所需时间（瀑布图红线）

首次渲染：页面第一次出现内容所需的时间

RAIL测量模型

Response：响应

Animation：动画

Idol：空闲

Load：加载

Rail评估标准

响应：所有响应应在50ms内完成

动画：60FPS

空闲：越多越好

加载：控制在5s内

使用WebPageTest进行优化评估

一站式傻瓜测试，无需过多解释。

需要注意的点：

请求瀑布图：查看各项请求

首次访问：查看资源加载情况

二次访问：检查缓存的效率

如何手动获取耗时的计算方法

一般使用HTML5的performance属性进行获取。

window.addEventListener('load', (event) => {
    let timing = performance.getEntriesByType('navigation')[0]
    let tti = timing.domInteractive - timing.fetchStart
    console.log(`TTI ${tti}`)
})