性能优化-响应:
交互响应:用户与页面的交互足够快
画面流畅(帧率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}`)
})