近期公司應用頁面打開相對遲緩，用戶實際感受到的時間與產線業務埋點時間差異較大，引起了業務同事對埋點數據準確性的質疑。
簡單梳理了一下以後發現，誤差頁面普遍存在較多的展示圖片。爲了提高用戶的體驗，開發採用了預加載的方式。在真實圖片下載成功之前，優先展示默認圖片，但是實際埋點數據上報是在頁面Dom加載完成的時候就開始上報的（前端頁面基本上採用的是Vue或者React框架，在相關鉤子函數進行了埋點數據的上報），但是實際上，此刻圖片還沒有下載完成，進而導致業務埋點數據與首屏時間差距較大。
那什麼是頁面的首屏時間呢？
通用意義上的首屏時間分爲兩類。
- 頁面包含圖片，首屏時間是指所有圖片加載完成的時間；
- 頁面不包含圖片，首屏時間是指頁面處於穩定狀態前最後一次 dom 變化的時間。
那一般如何獲取首屏時間呢？傳統意義上的方法有如下兩種：
1、通過相關跨應用的自動化框架進行業務場景的操作。在操作之前，設定爲採集起始時間，然後進行相關操作後，選取操作響應後頁面上的部分固定元素作爲觀察點，當其出現的時候，作爲截止時間，通過截止時間與起始時間的差值作爲該頁面的首屏時間。
但是該種方法存在如下問題：
1）自動化框架本身存在元素定位時間長的問題，這一點在iOS上表現尤其突出，進而導致實際時間與計算時間差異比較大。
2）頁面佈局複雜，加載圖片較多，且圖片動態變幻時，不能準確確定是否頁面真正呈現，導致頁面首屏時間誤差較大。
2、通過手動在代碼埋點的方式。
但是這樣存在以下問題：
1）和業務代碼混用，違反設計原則。
2）覆蓋不完整，在業務中覆蓋率不一定能達到100%。
3）準確性不一定高，因爲不同開發可能會因爲頁面的差異導致實現差異。
通過以上分析，傳統方法獲取的首屏時間與用戶真實感受存在一定的誤差。
那是否有更精確的方法呢？近來深度學習的應用越來越廣泛也越來越熱門，或許可以一下結合深度學習來獲取首屏時間。
首先與傳統方法類似，需要將業務感興趣的場景自動化一下，進而可以在後續的版本迭代中持續應用。那接下來如何將其與深度學習結合呢？
很明顯，在自動化啓動之前，需要啓用相關錄屏軟件進行視頻的錄製，當完整業務場景自動化結束的時候，終止視頻的錄製，生成一個test.mp4文件。接着需要安裝一個視頻轉圖片的工具ffmpeg,通過它可以將剛纔生成的視頻文件按照不同的幀率（fps設置的越大，誤差越小，但是不宜過大，可以借鑑一下移動應用的通用幀率60fps）轉成一組圖片。命令格式如下
ffmpeg -i test.mp4 -y -an -q 0 -vf fps=20 test_%06d.jpg
然後將其中的跳轉圖片標註爲N，其他圖片統一標註爲Y，這樣深度學習需要的訓練數據就得到了，如果需要進一步的大數據量訓練數據，可以增加自動化場景，然後在不同的手機上進行運行，當然前提是分辨率要一致。
訓練數據到手了，建議採用半監督的MixMatch方案，實驗數據表明在一定數據量的前提下，測試誤差直逼監督學習算法（之所以不用監督學習算法，是因爲需要標註的過渡頁面過多，人力成本過高），準確率可以達到接近93%，基本可以滿足我們實際需要了。具體的訓練過程，就不一一贅敘了。現在我們可以準確識別出過渡頁與非過渡頁，而轉換幀率一定，通過轉成圖片的數字差，就可以得到實際跳轉頁面的完整時間，也就是所謂的首屏時間。
通過以上的方法，大大縮小了頁面真實首屏時間與計算時間的誤差，取得了較好的效果。如果各位對這個方案感興趣，可以自己實現體驗一波。
其他文章請關注微信公衆號測試架構師養成記閱讀。
