Vue首屏時間指標采集最佳方式詳解

更新時間：2023年01月10日 16:18:30 作者：皮皮大人

這篇文章主要為大家介紹了Vue首屏時間指標采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

SPA項目中，首屏加載速度都是老生常談的問題了，首屏時間直接反應了用戶多久能看到頁面的主要內(nèi)容，這決定了用戶體驗，本文聊一聊如何采集首屏時間，本文主要是單指正常記錄首屏時間（不和首屏js資源報錯等等掛鉤）

Performance

timing

connectStart：HTTP域名解析完成的時間
connectEnd：HTTP瀏覽器與服務器之間連接建立完成的時間
domComplete：DOM文檔解析完成，readyState變?yōu)閏omplete
domContentLoadedEventStart：所有腳本已經(jīng)執(zhí)行完，開始執(zhí)行DOMContentLoaded方法
domContentLoadedEventEnd：執(zhí)行DOMContentLoaded方法結束
domInteractive：DOM結構加載結束，開始加載內(nèi)嵌資源，readyState變?yōu)閕nteractive
domLoading：DOM結構開始解析，readyState開始是loading
domainLookupStart：DNS域名查詢開始
domainLookupEnd：DNS域名查詢結束
fetchStart：瀏覽器發(fā)起任何請求之前的時間戳
loadEventStart：開始加載load事件
loadEventEnd：load事件加載結束
navigationStart：unload上一個文檔的時間節(jié)點
redirectStart：第一個頁面重定向開始的時間
redirectEnd：最后一個頁面重定向結束的時間
requestStart：瀏覽器向服務器發(fā)起HTTP請求（包含緩存，本地資源）
responseStart：瀏覽器從服務器收到HTTP請求返回的第一個字節(jié)的時間
responseEnd：瀏覽器從服務器收到HTTP請求返回的最后一個字節(jié)的時間
secureConnectionStart：HTTPS協(xié)議握手之前的時間，如果非HTTPS，則為0
unloadEventStart：上一個文檔unload事件的開始時間（需要是同源文檔，否則為0）
unloadEventEnd：上一個文檔unload事件的結束時間（需要是同源文檔，否則為0）

那么首屏的時間是不是可以簡單取值為：

domComplete - navigationStart

答案是不可以的，因為在Vue和React等SPA框架中，頁面是空的，需要加載js，然后通過js腳本來把頁面內(nèi)容渲染出

來，所以上面簡單的運算是得不到真正首屏時間的

自動化采集和思考

手動化采集侵入代碼性強，而且也無法一勞永逸，可能也導致數(shù)據(jù)不夠標準，所以這里我采用的方式自動化采集，就是用一段代碼來做首屏的自動化采集。這里思考熱門方式：

MutationObserver 監(jiān)聽根節(jié)點的 dom 節(jié)點數(shù)量

當然還有個方案，計算計算FMP 如何相對準確的計算 FMP （當然我這里沒有使用該文章的方式，因為覺得執(zhí)行起來太過復雜）

此 API 監(jiān)聽頁面 DOM 變化，并告訴我們每次變化的 DOM 是被增加還是刪除

MutationObserver缺點：無法兼容骨架屏有無的情況，如果頁面有骨架屏，也沒法真正檢測出真正的白屏時間

而且難以決定什么是加載頁面完成的標記

我的方案

實現(xiàn)：

其實我的思考的方案很簡單，核心代碼其實只有兩行，就是通過 Vue.mixin() 混入組件 mounted 的時間，然后統(tǒng)計每個組件的加載在頁面上的時間，最后一個組件加載的時間就是用戶看到的首屏時間（因為所有組件已經(jīng)加載完畢，不包括異步組件）

import Vue from 'vue';
class whiteScreen {
    constructor() {
        const timing = window.performance.timing;
        // 記錄開始時間
        this.startTime = timing.navigationStart || timing.connectStart || 
        dayjs().format('YYYY-MM-DD HH:mm:ss:SSS');
        // 加載中狀態(tài) 
        this.loading = false;
        // 收集每個組件加載的完成數(shù)據(jù)
        this.times = [];
        // 記錄組件是否加載過，因為一個頁面會多次用到某組件，只記錄第一次加載成功即可
        this.isLoadedComp = {};
        // 是否在加載中
        this.setLoading(true);
        // 利用vue的mixin記錄每個組件掛載完成的時間
        const _this = this;
        Vue.mixin({
            /** 
            * 注意這里要用到mounted而不是created，因為我們要記錄白屏的時間
            * 所以是用戶看到界面的時刻，用mounted比created更加適合，具體看 vue 組件的生命周期 
            * 另外vue在組件和子組件加載機制。created和mounted執(zhí)行時機也存在區(qū)別 
            */
            mounted() {
            // 如果不是正在加載中，則返回
            if (!_this.isLoading()) return;
            // 獲取組件標簽
            const name = this.$options.name || this.$options._componentTag;
            // 如果該組件已經(jīng)加載過，則不用再記錄
            if (_this.isCompLoaded(name)) return;
            this.$nextTick(() => {
                if (name) {
                    _this.push({
                    name: name,
                    // 記錄當前組件加載成功的時間
                    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             });
            }
           });
          }
      });
    }
    isLoading() {
        return this.loading;
    }
    setLoading(value) {
      this.loading = value;
      if (!this.isLoading()) {
        const data = [...this.times];
        const startTime = this.startTime;
        // TODO: 上傳埋點
        console.log({
          data,
          startTime,
        });
      }
    }
    isCompLoaded(name) {
      if (!this.isLoadedComp[name]) {
        this.isLoadedComp[name] = true;
        return false;
      }
      return this.isLoadedComp[name];
    }
}

解釋一下上述代碼，如上面所說的，用了Vue.mixin的方式記錄每個組件的加載的完成時間，上面有個對象 isLoadedComp 用來記錄頁面是否加載過組件，舉個例子說明：

page含有A組件，但是A組件在page有被多次使用到，所以我們只需要第一次加載作為依據(jù)即可

使用了這段代碼后，我們就會得到這樣如下的 data 數(shù)據(jù)結構，如下圖：

這樣我們準確的取得了頁面加載每個組件用到的時間，但是還存在一個問題，上面的 loading 狀態(tài)應該何時結束，我們要根據(jù)什么作為頁面加載完成的依據(jù)，這里大家不妨思考下

設置組件最大加載時間

來看看這種情況，頁面 page 有異步組件的情況，page有10個組件，2個組件是異步，8個同步組件，加載同步組件需要2面，加載異步組件需要10秒，理論上我們的白屏時間應該2s，而不是8秒，因為此時用戶已經(jīng)能看到界面，并且可以做一些有效點擊操作，所以我們結合上面的，什么作為頁面加載完成的依據(jù)得出我們的設計方式

這樣我們可以設置一個組件最大的加載時間，用一個倒計時，每次組件加載完就清空倒計時，再重新創(chuàng)建倒計時。如果加載時間超過倒計時的時間，則這個組件不是首屏的時間計算之內(nèi)。

什么作為頁面加載完成的依據(jù)？倒計時結束就不再獲取組件的加載完成時間，得出來的頁面最后加載的組件的時間就是首屏結束的時間

上代碼：

import Vue from 'vue';
class whiteScreen {
    constructor({ safeTime = 3000 } = {}) {
        // 設置組件最大加載時間
        this.safeTime = safeTime;
        // 其他...
        Vue.mixin({
            /** 
            * 注意這里要用到mounted而不是created，因為我們要記錄白屏的時間
            * 所以是用戶看到界面的時刻，用mounted比created更加適合，具體看 vue 組件的生命周期 
            * 另外vue在組件和子組件加載機制。created和mounted執(zhí)行時機也存在區(qū)別 
            */
            mounted() {
            // 如果不是正在加載中，則返回
            if (!_this.isLoading()) return;
            // 獲取組件標簽
            const name = this.$options.name || this.$options._componentTag;
            // 如果該組件已經(jīng)加載過，則不用再記錄
            if (_this.isCompLoaded(name)) return;
            this.$nextTick(() => {
                if (name) {
                    _this.push({
                    name: name,
                    // 記錄當前組件加載成功的時間
                    time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
             });
            }
           });
          }
      });
    }
    isLoading() {
        return this.loading;
    }
    setLoading(value) {
      this.loading = value;
      if (!this.isLoading()) {
        const data = [...this.times];
        const startTime = this.startTime;
        // TODO: 上傳埋點
        console.log({
          data,
          startTime,
        });
      }
    }
    createCountDown() {
      window.clearTimeout(this.countTime);
      this.countTime = window.setTimeout(() => {
        this.setLoading(false);
      }, this.safeTime);
    }
    isCompLoaded(name) {
      if (!this.isLoadedComp[name]) {
        this.isLoadedComp[name] = true;
        return false;
      }
      return this.isLoadedComp[name];
    }
    push(item) {
      // 重新創(chuàng)建定時器
      this.createCountDown();
      this.times.push(item);
    }
}

這種方式是存在一定缺陷，雖然 safeTime 是可以傳進來的，但是這個值不好設置，這里我們默認3秒，如果組件需要加載3秒，或者3秒內(nèi)沒有組件加載，我們視為首屏加載結束（注意：這里的倒計時不是從 window.onload 開始的，而且在第一個組件mounted完成的時候開始，所以算的組件加載完成到下一個組件加載完成是否超過3秒）

怎么兼容骨架屏完成的情況

這里我們可以取巧，骨架屏組件修改如下：

<div>
    <span v-if="isOpen">我是骨架屏</span>
    <span v-else> 
    // 這里可以寫成空樣式的組件 
    <skeleton-loaded></skeleton-loaded>
    <slot></slot>
    </span>
</div> 
// skeleton-loaded 
<span></span>

當骨架屏結束的時候，出現(xiàn)一個 skeleton-loaded 組件，那么這個組件會走mounted。被我們監(jiān)聽到，最后可以得到骨架屏的加載接觸的情況

// 這個就是骨架屏組件加載結束的時間
const skeletonLoadedTime = this.times.find(item =&gt; item.name === 'skeleton-loaded').time

當然，這只是個例子，現(xiàn)實可以隨你自己去發(fā)揮，確定什么是代表首屏結束的標志，好比我的真實業(yè)務情況，就是很簡單，找到 element-ui 的 el-table 就可以了

// 這個就是 el-table 組件加載結束的時間
const elTableLoadedTime = this.times.find(item =&gt; item.name === 'el-table').time

結論

通過上面和結合perforemance，我們可以得出下面的時間：

所有組件加載的時間times
首屏的時間（刷新開始到最后一個時間結束）：times[times.length - 1]（最后一個組件的加載時間） - perforemance.timing.navigationStart（unload上一個文檔的時間節(jié)點）
框架加載時間的時間：times[0]（第一個組件加載的時間） - perforemance.timing.responseEnd（瀏覽器從服務器收到HTTP請求返回的最后一個字節(jié)的時間）
加載js資源所需要的時間：perforemance.timing.responseEnd（瀏覽器從服務器收到HTTP請求返回的最后一個字節(jié)的時間） - perforemance.timing.requestStart（瀏覽器向服務器發(fā)起HTTP請求（包含緩存，本地資源））

其實文中的思路其實特別簡單，而且可以根據(jù)自己的需求來定制，兼容各種情況，有疑問可以在評論區(qū)提出。

謝謝觀看，最后祝大家上線沒bug，更多關于Vue首屏時間指標采集的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: