前端性能监控和稳定性

timeline
      title 页面加载时间轴
      开始请求
      获取首字节 
      页面开始显示 : 白屏时间
      页面完全加载 : DCL和onload

统一度量指标

页面完全加载完成时间

DOMContentLoad、window.onload

限制：

页面渲染依赖于接口数据容易被绕过
在长页面下不能反映用户真实感知

白屏时间

页面开始显示的时间

限制：无法体现页面核心内容渲染的时间

页面开始显示到页面完全加载完成中间的时间

FMP

FMP(first meaningful paint):单位时间内布局节点增加最多的时间点。就是只计算首屏渲染。

限制：

没有标准实现，每个系统都不一样
对页面元素变化过于敏感

LCP

LCP(large contentful paint):统计页面内占屏幕面积最大的元素绘制时间

限制：最大元素不一定是最重要的元素，浏览器支持率仅有70%，有些浏览器不支持

效率高的监控方式

因为页面上面的数据大多数都是通过多个接口返回，前端进行拼装的，所以我们可以自定义fmp，在所有依赖的接口返回后且页面完全加载后去统计页面的fmp才是我们想要的页面主要内容渲染的指标时间点

首屏优化的思路

timeline
      title 秒开优化思路
      充分利用缓存 : 前后端缓存
      任务减负 : 包体积瘦身
              : 去除非必要渲染
      充分利用cpu和网络 : 不闲置、不互等
      区分优先级 : 非首屏资源懒加载
      排除昂贵渲染开销 : 排除低级错误
                       : 寻找替代方案