精確並自動化地獲取頁面首屏時間

hoperyy發表於2019-03-04

本文發表在 微店前端團隊 blog

作者:劉遠洋

公司:微店 – 前端團隊

日期:2018-03-05

背景

在前端效能資料的獲取方法上,現在業內大多使用手動埋點的方式,即在程式碼中,人工判斷首屏完成的位置,並在該處新增首屏記錄的程式碼,類似: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 不再變化,但頁面元素中,imgsrc 發生了變化或元素的 background-image 發生了變化,並不會觸發在 MutationObserver 的回撥,導致統計失誤

      因此,我們現在的方案是結合 MutationObserver 和 setInterval,在 MutationObserver 回撥的間歇,啟動 setInterval,保證頁面載入過程中打點間隔不會過長,提高統計準確率。

統計誤差

即使使用了上述複雜的打點與判斷,誤差仍然存在,那麼,誤差到底在哪裡?

如下圖所示:

不穩定狀態(1 images)   穩定狀態2(2 images)      穩定狀態1(2 images)
    |                        |                       |
    |________________________|_______________________|
    t1                       t2                      t3
複製程式碼

按照上面的理論,我們會取 t2 時刻為可以統計首屏的時刻,兩張圖片載入完成的時刻即為首屏完成的時刻。

t2t1 時刻差了 1 張圖片。

按照我們的理論,首屏完成時間一定在 t2 之後的某個時刻 t2.n

而實際相差的那張圖片,什麼時候載入完成的,我們不得而知,可能在 t2 前已經載入完畢了,也可能已經發出請求,但還沒載入完畢。

誤差就在這裡,它總會存在。

但我們需要統計的是在誤差可以接受範圍內的首屏資料,根據在公司業務實踐的反饋來看,資料可靠性很高。

Talk is cheap, show me the code

我們也開源了這個小工具:

github: auto-compute-first-screen-time

npm: auto-compute-first-screen-time

歡迎小夥伴們使用,吐槽,改進。

相關文章