Nemetric 实现原理
Nemo Metric(check the sourceCode)主要分为四个模块:
performance:主要是performance以及performanceObserver的一些调用的封装。
detect-browser:用于检测浏览器的名字,版本,以及操作系统。
idle-queue:实现将任务放入队列,在cpu空闲时候才执行,在这里就是检测到指标数据以后丢到这个队列里面让它来统一处理。
Nemetric:供外部调用的类,接受指标参数,采样率,指标检测回调等参数然后调用detect-browser,idle-queue以及performance实现对性能的采集。
Performance (核心模块):
利用Performance 的Performance Timeline API, Navigation Timing API, User Timing API,Resource Timing API获取Navigation指标,资源指标以及用户动作时间指标等,利用PerformanceObserver监听firstPaint,firstContentfulPaint,firstInputDelay等。
首先是判断方法的支持性,不支持就没办法了。
1 |
|
1. 获取Navigation Timing(指标可以继续增加)
直接 performance.getEntriesByType(‘navigation’)[0] 获取到Navigation 这个Entry,然后再获得相应的指标即可。
1 |
|
2. 记录User Timing
主要是利用Performance.mark以及Performance.measure方法,核心就是对一个metric记录两遍,然后调用measure 获取得到duration。
1 |
|
**Nemetric **对其进行封装对外暴露 start和 end 方法,而endPaint是一些UI渲染以及异步操作的记录。
1 |
|
3. 记录First Paint,First Contentful Paint,FirstInputDelay,DataConsumption.
Performance **提供方法给Nemetric **监听某个EventType.
1 |
|
Nemetric 根据调用参数来初始化需要监听的指标,包括(firstPaint,firstContentfulPaint,firstInputDelay,dataConsumption)
1 |
|
原理都是一样,初始化每个指标,对他们进行PerformanceObserver.observe就行监听,等到监听有结果就调用digest函数,digest统一调用performanceObserverCb.而performanceObserverCb就是我们整个代码的核心!
1 |
|
performanceObserverCb **接受一个指标的参数,然后找到对应的EntryName,调用PushTask将任务放到Idle-queue里面。而任务就是logMetric**
1 |
|
logMetric很简单,就是调用输出log(此代码就不贴出来了),以及sendtiming,sendtiming就是用户传参给**Nemetric **的analyticsTracker分析结果动作回调函数。
1 |
|
Detect Browser(获取浏览器名,版本,系统)
detect-browser 其实很简单,就是根据userAgent,对Nemetric暴露detect方法,然后主要是parseUserAgent,枚举匹配对得上的userAgentRules.
1 |
|
Idle Queue (低优先级任务队列)
这是谷歌大神Phlip Walton 给出的一个解决方案.Idle Queue维护一个任务队列,在前面的Performance会看到,pushTask就是将任务放到这里面,等到cpu空闲,任务才开始执行。
1 |
|
核心就是 scheduleTasksToRun_,ensureTasksRun_是表示在页面不可见时候任务是否继续进行.
1 |
|
其中 queueMictotask就是一个创建一个微任务,可以看到,如果支持Promise就用promise,否则就用MutationObserver模拟一个微任务,如果MutationObserver都不支持的话,只能用同步代码处理了。
1 |
|
而rIC就是 requestIdleCallBack的简称了,cIC 就是 cancelIdleCallBack,如果浏览器不支持requestIdleCallBack 和cancelIdleCallBack,就用setTimeout来代替。
1 |
|
最最核心的就是runTasks_了,就是在deadline前,不断的处理任务的队列,直到队列为空。
1 |
|
Nemetric
非常简单了,对外暴露参数,然后根据参数调用相应模块就行。
1 |
|
总结
**Nemetric**主要是利用Performace以及Performace Observer来采集用户的数据。正如
如何采集和分析网页用户的性能指标 所说,我们算用户指标的平均时长对我们来说用处不大。利用这些数据我们可以
- 将性能指标结合地理位置录入数据库,形成统计图。
- 大部分用户的指标的区间以及分布(哪些国家地区,浏览器版本比较慢等等)。
- 做相关的A/B test 优化 对比 性能统计区间,提高我们h5的转化率。
- 本文作者:Warren
- 本文链接:http://unclewarren.cn/2019/11/05/Nemetric%20%E5%AE%9E%E7%8E%B0%E5%8E%9F%E7%90%86/index.html
- 版权声明:本博客所有文章均采用 BY-NC-SA 许可协议,转载请注明出处!