加载,渲染性能分析
- webview
- weex/react-native
- flutter
分析:
RAIL 性能模型:
- Respond:0 - 100ms,视窗一般需要在这个时间段响应用户
- Animation:0~16ms,动画一般要控制在60FPS。
- Idle:最大化主进程的空闲时间,这样可以及时响应用户输入。
- Load:内容需要在1000ms 内加载出来
- First Paint(FP) 不在白屏
- First Contentful Paint(FCP) 页面有效内容的绘制 // 大面积 dom 修改
- First Meaningful Paint(FMP) 页面有意义的内容绘制
- Time to Interactive(TTI) 可交互时间
- Input Latency
- Speed Index 显示页面内容的可见填充速度
- Cumulative Layout Shift 累积版式移位
FP,FCP 检测方式:`performance.getEntriesByType("paint")`