performance
首屏
手机屏幕不滚动的情况下,从用户打开网站开始到渲染完成的时间。
这里我们要用的是window.performance.timing属性
| 属性 | 含义 |
|---|---|
| navigationStart | 准备加载页面的起始时间 |
| domainLookupStart | 开始进行dns查询的时间 |
| domainLookupEnd | dns查询结束的时间 |
| connectStart | TCP连接开始 |
| connectEnd | TCP连接完成 |
| domInteractive | 解析dom树开始 |
| domComplete | 解析dom树结束 |
| loadEventEnd | onload事件结束的时间 |
| fetchStart | 开始检查缓存或开始获取资源的时间 |
| domLoading | loading的时间 (这个时候还木有开始解析文档) |
页面加载完成是没API的,那么我们就需要在首屏做标记,比如加载完哪个图片,或者加载到哪个JS就可以标记首屏加载结束。
首屏 = 标记时间 - performance.timing.navigationStart
白屏时间
白屏就是从用户打开网站到显示body的时间,我们可以在body标签onload的时候调用方法,获取当前时间time
白屏时间 = time - performance.timing.navigationStart