围绕着首屏时间,页面性能衡量指标经历了3个阶段:
(1). 第一阶段：自定义打点时期:
①. 方案:
a. 页头和首屏dom处分别通过new Date()打点
②. 缺点:
a. 方法笨重
b. 精确度不高
c. 数据单一
(2). 第二阶段：W3C标准时期:
①. W3C标准时期,通过performance api来做计算
②. 缺点:
a. 随着单页SPA的流行,load时间早于首屏时间
b. W3C标准只有参考意义
(3). 第三阶段：感官性能优化指标:
①. 引入了感官性能优化指标:
a. 主要分成FP、FCP、FMP、TTI等数据指标
b. 其中FMP指标比较符合首屏时间
②. 新版本提供了LCP(类似于FMP的时间):
a. 但存在兼容性
b. 对于性能这个事项,慢网络和老设备更是应该关心的点
③. 猜想首屏中主要元素的加载完成时间类似的等同于FMP时间
(6). 捕获FMP原理:
成为FMP元素的条件
①. 首屏中,怎么样的元素才可以成为主要元素呢?
a. 主要是一些体积大,屏幕占比大,多是一些图片、视频、canvas等元素
b. 这些元素加载完成的时间则可以近似的认为FMP的时间
FMP算法设计:
①. 通过监听元素加载
②. 根据可视区域面积,元素权重等关系,计算元素的得分
③. 把子元素的得分之和和父元素得分做比对,取较大值,得到可视区域内得分最高的元素集合
④. 过滤分数超过平均分的元素,拿到更小范围的元素集合
⑤. 再对这些元素取最大的加载时间,这个时间则可以用来作为FMP的时间