本日来给人人引见下前端监控中一个特定目标的猎取算法，有人会问，为啥就单单讲一个目标？这是由于，如今大部份的目标，比方白屏时刻，dom加载时刻等等，都能经由历程当代浏览器供应的种种api去举行较为正确的猎取，而本日讲的这个目标，以往猎取他的体式格局只能是经由历程逻辑埋点去猎取它的值，因而在做一些前端监控时，须要依据营业须要去转变页面临这个值的埋点体式格局，会比较烦琐，碰巧近来刚刚好在做一些前端监控相干的项目，碰到这个题目时就在想，能不能经由历程一种不必埋点的体式格局，将这个值给猎取到？捣腾了一段时刻，终究把算法弄出来了，本日就来给人人引见下————FMP(first meaning paint) 目标的智能猎取算法
什么是FMP
解答这个题目之前，我们先来相识下当代前端监控机能的重要目标统计要领，在2013年以后，规范构造推出了 performance timing api ，以下图
这个api统计了浏览器从网址最先导航到 window.onload事宜触发的时刻点，比方要求最先的时刻点——requestStart,相应完毕的时刻点——responseEnd,经由历程这些时刻点我们可以盘算出一些对页面加载质量有指点看法的时长，比方以下几个:
- TTFB : ResponseStart – RequestStart (首包时刻，关注收集链路耗时)
- FPT : ResponseEnd – FetchStart （初次衬着时刻 / 白屏时刻）
- TTI : DomInteractive – FetchStart （初次可托付时刻）
- Ready : DomContentLoadEventEnd – FetchStart （加载完成时刻）
- Load : LoadEventStart – FetchStart （页面完整加载时刻）
经由历程这些目标我们可以获得许多有效的web端网页加载信息，竖立对网页机能概略
以上的目标可以对网页举行数值化的权衡，然则实在这类权衡只能表现一个视角的机能看法，比方TTFB很快，就可以代表用户可以很快的看到页面的内容嘛？这个不一定是建立的，因而人们有最先从用户的视角去剖析网页加载的机能状况，将用户对待加载历程，分成了以下几个阶段：
- 页面是不是正在一般加载 （happening）
- 页面加载的内容是不是已充足（useful）
- 页面是不是已可以操作了 （usable）
- 页面是不是可以交互，动画是不是顺畅（delightful）
而我们本日议论的FMP（first meaningful paint），实在就是回复 is it useful,加载的内容是不是已充足，实在这是一个很难被定义的观点。每一个网页都有本身的特性，只要开发者和产物可以比较肯定哪一个元素加载的时刻点属于FMP,本日我们就来议论一下，怎样比较智能的去找出页面谁人重要的元素，肯定页面的FMP
成为FMP元素的前提
起首我们可以看看下面的图：
我们可以发如今页面中比较useful的内容，都是含有信息量比较雄厚的，比方图片，视频，动画，别的就是占可视面积较大的，页面中还存在两种形状的内容可以被视为是useful的，一种是单一的块状元素，别的一种是由多个元素组合而成的大元素，比方视频元素，banner图，这类属于单一的块状元素，而像图片列表，多图象的组合，这类属于元素组合
总结一下成为FMP元素的前提：
- 体积占比比较大
- 屏幕内可见占比大
- 资本加载元素占比更高(img, svg , video , object , embed, canvas)
- 重要元素多是多个构成的
算法怎样设想
前面引见了FMP的观点另有成为FMP的前提，接下来我们来看看怎样设想FMP猎取的算法，根据上面的引见，我们晓得算法分为以下两个部份:
- 猎取
FMP元素 - 盘算
FMP元素的加载时刻
假如有相识过浏览器加载道理的同砚都晓得，浏览器在在猎取到html页面以后会逐渐的对html文档举行剖析，碰到javascript会住手html文档的剖析事情，实行javascript，实行完继承剖析html，直到全部页面剖析完成为止。页面除了html文档中的元素加载，能够在实行javascript的时刻，会发作动态的元素片断加载，一般来讲，首屏元素会在这时期加载。因而我们只须要监控元素的加载和加载的时刻点，然后再举行盘算。
详细的算法流程以下图
相干的代码链接我已放在末了面了，下面我会逐渐的解说全部算法流程
我把全部流程分为两个下面两个部份：
- 监听元素加载，重要是为了肯定一般元素加载的时刻点
- 肯定
FMP元素，盘算出终究的FMP值
下面我们根据步骤来剖析
初始化监听
- 可以看到起首我们先实行了
firstSnapshot要领，用于纪录在代码实行之前加载的元素的时刻点 - 接下来初始化
MutationObserver，最先监听document的加载状况，在发作回调的时刻，纪录下当前到performance.timing.fetchStart的时刻距离,然后对body的元素举行深度遍历，举行办理，纪录是在哪一次回调的时刻纪录的，以下图
- 监听的末了我们会将在
window.onload的时刻去触发搜检是不是住手监听的前提，以下图
假如监听的时刻凌驾LIMIT，或许发作回调的时刻距离已凌驾1s中，我们以为页面已稳固，住手dom元素加载的监听，最先进入盘算历程
完成监听，举行元素得分盘算
- 起首前面我们说了，我们的元素关于页面的孝敬是差别的，资本加载的元素会对用户视觉感官的影响比较大，比方图片，带背景的元素，视频等等，因而我设想了一套权重体系，以下：
可以看到svg,img的权重为2，canvas,object,embed,video的权重为4，其他的元素为1，
也就是说，假如一个图片面积为1/2首屏面积，实在他的影响力会和一般元素占满首屏的影响力一样
- 接着我们回到代码，我们起首会对全部页面举行深度优先遍历搜刮，然后对每一个元素举行举行分数盘算，以下图
可以看到我们经由历程element.getBoundingClientRect猎取了元素的位置和大小，然后经由历程盘算"width * height * weight * 元素在viewport的面积占比"的乘积，肯定元素的终究得分，然后将改元素的子元素得分之和与其得分举行比较，去较大值，纪录得分元素集
经由历程盘算肯定FMP元素，盘算终究FMP时刻
经由历程上面的步骤我们猎取到了一个鸠合，这个鸠合是”可视区域内得分最高的元素的鸠合”,我们会对这个鸠合的得分取均值，然后过滤出在均匀分之上的元素鸠合，然后举行时刻盘算
可以看到分为两种状况去处置惩罚:
-
weight为1的一般元素，那末我们会经由历程元素上面的标记，去查询之前保留的时刻鸠合，获得这个元素的加载时刻点 -
weight不为1的元素，那末实在就存在资本加载状况，元素的加载时刻实际上是资本加载的时刻，我们经由历程performance.getEntries去猎取对应资本的加载时刻，猎取元素的加载速率
末了去一切元素最大的加载时刻值，作为页面加载的FMP时刻
末了
以上就是全部算法的比较详细的流程，能够有人会说，这个东西算出来的就是正确的么？这个算法实际上是根据特性剖析，特定的划定规矩总结出来的算法， 整体来讲照样会比较正确，固然web页面的规划假如比较奇异，多是会存在一些误差的状况。也愿望人人可以一起来雄厚这个东西，为FMP这个盘算要领提出本身的发起
附上代码 链接
