如何實現遊戲陪玩系統原始碼前端效能監控？

雲豹科技程式設計師發表於2021-10-15
遊戲原始碼前端

遊戲陪玩系統原始碼前端效能監控方式

程式碼與工具

以 GA（Google Analytics） 為代表的程式碼監控和以 WebPageTest 為代表的工具監控

在這裡插入圖片描述

模擬與真實

合成監控（Synthetic Monitoring，SYN），真實使用者監控（Real User Monitoring，RUM）

一個是模擬遊戲陪玩系統原始碼場景和資料，一個是真實的使用者場景

合成監控：

在這裡插入圖片描述

真實使用者監控：
在這裡插入圖片描述

關鍵指標

  • 白屏時間：從點選遊戲陪玩系統原始碼圖示後到頁面開始有內容的時間；
  • 首屏時間：從點選遊戲陪玩系統原始碼圖示後到首屏內容渲染完畢的時間；
  • 使用者可操作時間節點：domready觸發節點，點選事件有反應；
  • 總下載時間：window.onload的觸發節點。

所有指標：
在這裡插入圖片描述

常規統計方案

白屏時間

是什麼

白屏時間節點指的是從使用者進入遊戲陪玩系統原始碼（輸入url、重新整理、跳轉等方式）的時刻開始計算，一直到頁面有內容展示出來的時間節點。

這個過程包括dns查詢、建立tcp連線、傳送首個http請求（如果使用https還要介入TLS的驗證時間）、返回html文件、html文件head解析完畢。

程式碼實現

在html文件的head中所有的靜態資源以及內嵌指令碼/樣式之前記錄一個時間點，在head最底部記錄另一個時間點，兩者的差值作為白屏時間

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>白屏時間</title>
    <script>
        // 開始時間
        window.pageStartTime = Date.now();
    </script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script>
        // 白屏結束時間
        window.firstPaint = Date.now()
    </script></head><body>
    <div>123</div></body></html>白屏時間 = firstPaint - pageStartTime

缺點：

無法獲取解析html文件之前的時間資訊

首屏時間

是什麼

首屏時間 = 白屏時間 + 首屏渲染時間

程式碼實現

（1）首屏模組標籤標記法

由於遊戲陪玩系統原始碼解析HTML是按照順序解析的，當解析到某個元素的時候，覺得首屏完成了，就在此元素後面加入

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>首屏時間</title>
    <script>
        // 開始時間
        window.pageStartTime = Date.now();
    </script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href=""></head><body>
    <div>123</div>
    <div>456</div>
    // 首屏可見內容
    <script>
        // 首屏結束時間
        window.firstPaint = Date.now();
    </script>
    // 首屏不可見內容
    <div class=" "></div></body></html>首屏時間 = firstPaint - pageStartTime

（2）統計首屏內載入最慢的圖片/iframe（更常用）

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>首屏時間</title>
    <script>
        window.pageStartTime = Date.now()
    </script></head><body>
    <img src="()">
    <img src="()">
    <script>
        function load () {
            window.firstScreen = Date.now()
        }
        window.onload = function () {
            // 首屏時間
            console.log(window.firstScreen - window.pageStartTime)
        }
    </script></body></html>

缺點：使用場景受限

同樣無法獲取解析html文件之前的時間資訊

這種方案比較適合首屏元素數量固定的遊戲陪玩系統原始碼頁面，比如移動端首屏不論螢幕大小都展示相同數量的內容，響應式得改變內容的字型、尺寸等。

但是對於首屏元素不固定的遊戲陪玩系統原始碼頁面，這種方案並不適用，最典型的就是PC端頁面，不同螢幕尺寸下展示的首屏內容不同。上述方案便不適用於此場景。

可操作時間

使用者可操作的時間節點即dom ready觸發的時間，使用jquery可以通過$(document).ready()獲取此資料。

// 原生JS實現dom readywindow.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');});

總下載時間

總下載時間即window.onload觸發的時間節點。

window.performance

是什麼

用來測量遊戲陪玩系統原始碼網頁和Web應用程式的效能api

屬性介紹
在這裡插入圖片描述

memory欄位代表JavaScript對記憶體的佔用。
navigation欄位統計的是一些網頁導航相關的資料：

  • redirectCount:重定向的數量（只讀），但是這個介面有同源策略限制，即僅能檢測同源的重定向；
  • type 返回值應該是0,1,2 中的一個。分別對應三個列舉值: 0 : TYPE_NAVIGATE
    (使用者通過常規導航方式訪問遊戲陪玩系統原始碼頁面，比如點一個連結，或者一般的get方式) 1 : TYPE_RELOAD
    (使用者通過重新整理，包括JS呼叫重新整理介面等方式訪問頁面) 2 : TYPE_BACK_FORWARD (使用者通過後退按鈕訪問本頁面)

最重要的是timing欄位的統計資料，它包含了網路、解析等一系列的時間資料。

在這裡插入圖片描述

說明：

  • startTime：有些遊戲陪玩系統原始碼瀏覽器實現為navigationStart，代表瀏覽器開始unload前一個頁面文件的開始時間節點。比如我們當前正在瀏覽baidu.com，在位址列輸入google.com並回車，瀏覽器的執行動作依次為：unload當前文件（即baidu.com）->請求下一文件（即google.com）。navigationStart的值便是觸發unload當前文件的時間節點。如果當前文件為空，則navigationStart的值等於fetchStart。
  • redirectStart和redirectEnd：如果遊戲陪玩系統原始碼頁面是由redirect而來，則redirectStart和redirectEnd分別代表redirect開始和結束的時間節點；
  • unloadEventStart和unloadEventEnd：如果前一個文件和請求的文件是同一個域的，則unloadEventStart和unloadEventEnd分別代表瀏覽器unload前一個文件的開始和結束時間節點。否則兩者都等於0；
  • fetchStart是指在遊戲陪玩系統原始碼發起任何請求之前的時間值。在fetchStart和domainLookupStart之間，瀏覽器會檢查當前文件的快取；
  • domainLookupStart和domainLookupEnd分別代表DNS查詢的開始和結束時間節點。如果遊戲陪玩系統原始碼沒有進行DNS查詢（比如使用了cache），則兩者的值都等於fetchStart；
  • connectStart和connectEnd分別代表TCP建立連線和連線成功的時間節點。如果瀏覽器沒有進行TCP連線（比如使用持久化連線webscoket），則兩者都等於domainLookupEnd；
  • secureConnectionStart：可選。如果頁面使用HTTPS，它的值是安全連線握手之前的時刻。如果該屬性不可用，則返回undefined。如果該屬性可用，但沒有使用HTTPS，則返回0；
  • requestStart代表遊戲陪玩系統原始碼發起請求的時間節點，請求的方式可以是請求伺服器、快取、本地資源等；
  • responseStart和responseEnd分別代表遊戲陪玩系統原始碼收到從伺服器端（或快取、本地資源）響應回的第一個位元組和最後一個位元組資料的時刻；
  • domLoading代表遊戲陪玩系統原始碼開始解析html文件的時間節點。我們知道IE瀏覽器下的document有readyState屬性，domLoading的值就等於readyState改變為loading的時間節點；
  • domInteractive代表遊戲陪玩系統原始碼解析html文件的狀態為interactive時的時間節點。domInteractive並非DOMReady，它早於DOMReady觸發，代表html文件解析完畢（即dom
    tree建立完成）但是內嵌資源（比如外鏈css、js等）還未載入的時間點；
  • domContentLoadedEventStart：代表DOMContentLoaded事件觸發的時間節點：
    頁面文件完全載入並解析完畢之後,會觸發DOMContentLoaded事件，HTML文件不會等待樣式檔案,圖片檔案,子框架頁面的載入(load事件可以用來檢測HTML頁面是否完全載入完畢(fully-loaded))。
  • domContentLoadedEventEnd：代表DOMContentLoaded事件完成的時間節點，此刻使用者可以對頁面進行操作，也就是jQuery中的domready時間；
  • domComplete：html文件完全解析完畢的時間節點；
  • loadEventStart和loadEventEnd分別代表onload事件觸發和結束的時間節點

相關時間計算

  • DNS查詢耗時 = domainLookupEnd - domainLookupStart
  • TCP連結耗時 = connectEnd - connectStart
  • request請求耗時 = responseEnd - responseStart
  • 解析dom樹耗時 = domComplete - domInteractive
  • 白屏時間 = domloading - fetchStart
  • domready可操作時間 = domContentLoadedEventEnd - fetchStart
  • onload總下載時間 = loadEventEnd - fetchStart

靜態資源的時間計算

widow.performance.getEntries()，用來統計遊戲陪玩系統原始碼靜態資源相關的時間資訊

返回一個陣列，陣列的每個元素代表對應的靜態資源的資訊
在這裡插入圖片描述

屬性介紹

  • initiatorType資源屬性，有img、css等
  • duration請求花費的時間
  • 其他的與上面的window.performance.timing的屬性一樣
    在這裡插入圖片描述
    以上便是“遊戲陪玩系統原始碼前端效能監控方案詳解”的全部內容，希望對大家有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2837615/，如需轉載，請註明出處，否則將追究法律責任。

相關文章