如何自动猎取首屏时候

作者：刘远洋

公司：微店 – 前端团队

日期：2018-03-05

本文宣布在 微店前端团队 blog

背景

在前端机能数据的猎取要领上，如今业内大多运用手动埋点的体式格局，即在代码中，人工推断首屏完成的位置，并在该处增加首屏纪录的代码，相似：firstscreen.report() 如许。

如许做的简朴费事，但瑕玷也很明显：

• 和营业代码混用

  通用的监控需求混入了营业代码中

• 掩盖不完整

  须要页面开发者自发手动增加埋点代码，在营业中埋点掩盖率不肯定能到达 100%

• 正确性不肯定高

  由于须要开发者自行推断统计剧本安排的位置，就会存在一些不正确的状况，由于每一个人对首屏的明白差别

基于上面的剖析，我们近期尝试了一些计划，试图将首屏时候盘算自动化，节约人力、并进步正确性。

定义

对首屏时候的定义，每一个公司能够会有所差别，在本文中，首屏时候指的是：

• 假如页面首屏有图片

  首屏时候 = 首屏图片悉数加载终了的时候 - window.performance.timing.navigationStart

• 假如页面首屏没有图片

  首屏时候 = 页面处于稳固状况前末了一次 dom 变化的时候 - window.performance.timing.navigationStart

完成道理

整体思绪为：

• 从页面加载最先，依据肯定的间隔办理，不停纪录各个时候下页面首屏图片列表和其他信息

  题目：依据如何的间隔办理？

• 找出页面首屏处于稳固状况的时候 T1（到这个时候为止，页面首屏能够已稳固了一段时候）

  题目：如何找出这个 T1？

• 以 T1 时候的首屏图片数目为准，向前倒推，找到一切办理中末了一次和 T1 时候首屏图片一致的办理时候 T2
• 统计 T2 时候的一切图片加载完成时候 T3
• T3 即为首屏完成的时候，举行上报

下面，一个个处理上文中提到的题目：

• 题目：如何找出首屏处于稳固状况的时候 T1？

  我们将页面从加载到衬着分为两大阶段：1. 猎取数据；2. 数据猎取终了，衬着页面。

  这个逻辑相符绝大部份的页面逻辑：先猎取数据，再衬着页面。

  处理计划：

  1. 经由过程 AOP 切面体式格局监听 XHR 的 send 对象，抓取页面中的第一个 XHR 要求，以第一个 XHR 要求发出的时候为出发点，统计在 1000ms 之内一切发出的要求到数组 Request 中。

     我们以为能够影响首屏的要求在 [第一个 xhr 要求发出的时候，第一个 xhr 要求发出的时候 + 1000ms] 的时候段内均已发出。

  2. 针对串连型的要求（即下一个要求依靠上一个要求的返回数据），同时统计每一个要求返回后，500ms 之内新发出的要求到数组 Request 中。

     有些页面的数据要求体式格局是串行的，能够经由两个串连的要求后首屏的数据才加载。

     影响首屏的要求能够也会以如许的情势发出。

  3. 数组 Request 中统计到的要求，基础包含了一切影响首屏的数据要求，同时也包含了部份不影响首屏的数据要求。
  4. 针对上述统计到的要求，找到一切数据返回的时候 T1，然后，T1 = T1 + 300ms，保证页面吸收数据后衬着终了（300ms 用于一次衬着足够了）。
  5. 此时的 T1 时候，页面首屏被以为处于稳固状况。

• 题目：依据如何的间隔办理？

  • MutationObserver

    人人都晓得 MutationObserver 对象用于捕获页面 dom 变化，因而在剧本中，我们运用了 MutationObserver 监听 dom 变化，并在每次 dom 变化时触发一次办理（统计该时候首屏图片信息）

  • setInterval

    setInterval 也能完成定时办理

  • MutationObserver 和 setInterval 组合

    但 MutationObserver 回调函数的触发机遇开发者并不可控，有几种状况：

    • 两次回调之间能够间隔几百毫秒以至 1秒多，致使统计偏差较大
    • 某些状况下，dom 不再变化，但页面元素中，img 的 src 发生了变化或元素的 background-image 发生了变化，并不会触发在 MutationObserver 的回调，致使统计失误

      因而，我们如今的计划是连系 MutationObserver 和 setInterval，在 MutationObserver 回调的间歇，启动 setInterval，保证页面加载过程当中办理间隔不会太长，进步统计正确率。

统计偏差

纵然运用了上述庞杂的办理与推断，偏差依然存在，那末，偏差到底在那里？

如下图所示：

不稳固状况（1 images）   稳固状况2（2 images）      稳固状况1（2 images）
    |                        |                       |
    |________________________|_______________________|
    t1                       t2                      t3

依据上面的理论，我们会取 t2 时候为能够统计首屏的时候，两张图片加载完成的时候即为首屏完成的时候。

t2 和 t1 时候差了 1 张图片。

依据我们的理论，首屏完成时候肯定在 t2 以后的某个时候 t2.n。

而现实相差的那张图片，什么时候加载完成的，我们不得而知，能够在 t2 前已加载终了了，也能够已发出要求，但还没加载终了。

偏差就在这里，它总会存在。

但我们须要统计的是在偏差能够接收范围内的首屏数据，依据在公司营业实践的反应来看，数据可靠性很高。

Talk is cheap, show me the code

我们也开源了这个小工具：

github: auto-compute-first-screen-time

npm: auto-compute-first-screen-time

迎接小伙伴们运用，吐槽，革新。