開發完第一版前端效能監控系統後的總結(無程式碼)

zane1發表於2018-02-07

（無論何時我都是一個實踐派）

說起前端效能監控系統，絕大部分人應該不陌生，也許你正在使用，又或者你只是聽說過。總之它就是這樣頻繁的出現在我們的工作之中。

那麼做一個前端效能監控系統，我們應該統計一些什麼維度的資訊呢？那些資料真正對於我們有用呢？它適用的場景又有哪些呢？有很多的問題需要回答，再做之前我們應該回答一些問題，如果這些問題不能回答出來那就不要輕易去嘗試。以下是我覺得需要想明白的一些問題。

先想明白一些問題

我們為什麼需要前端效能監控系統，是公司產品真的需要還是開發著玩玩？
業界有那麼多的成熟產品，我可以直接使用嗎？自己做一個是更好的方案嗎？
我們應該統計一些什麼緯度的資訊？你確定你統計的資料的準確性嗎？
你設計的這些維度資訊，對於我們開發真的有參考價值嗎？
你開發的產品能夠推廣給公司團隊使用嗎？別人需要你這個產品嗎？他會配合你嗎？
如果開始做，你瞭解過團隊中其他人的需求嗎？他們有沒有什麼意見對你有參考價值？
能對你或者團隊在技術上有什麼提升嗎？有伺服器資源嗎？後期有迭代的打算嗎？
能帶領團隊中其他人一起做嗎？對他們是否有吸引力？

以上是我個人覺得應該思考的一些問題，我們只要能給出一個合理的答案那就開始幹吧。

那麼咋們開始做吧

一個產品開始做之前我們應該想明白一些技術上或者UI上的一些問題

在產品上也許你應該畫一些產品原型圖，哪怕是簡單的手繪素描圖都是OK的。

在技術上我們要解決核心的統計問題，比如統計頁面效能資料的API：performance，performance相容IE9以上的瀏覽器，performance.timing統計頁面效能，performance.getEntriesByType('resource') 統計頁面資源效能。window.onerror統計頁面錯誤資訊。

開發中遇到的問題：

如何統計頁面所有AJAX效能資料，如何知道所有AJAX已載入完畢
如何統計頁面所有資源效能詳情（包括非同步ajax和圖片），瀏覽器api能搞定嗎
如何知道一個使用者訪問了哪些頁面，訪問深度何如，怎麼跟蹤記錄
獲取使用者IP網路資訊使用的第三方介面，如何能更好的做好快取，解決使用者每次訪問都呼叫的問題
一個頁面資源，ajax，js同時報錯，如何全部抓取並記錄下來
如何解決資料頻繁寫入資料量太大的問題，資料庫應該怎麼設計或處理

針對於以上幾個問題我簡單的描述我的處理方式：

1、如何統計頁面所有AJAX效能資料，如何知道所有AJAX已載入完畢？

由於頁面中ajax基本都是非同步載入，因此我們並不能確定頁面上的ajax是否真的已經載入完畢，window.onload並不能解決我們的問題。

鑑於絕大部分網頁的ajax都是用的XMLHttpRequest物件，我們可以在頁面載入之處重新定義XMLHttpRequest物件，對open，onload，onreadystatechange方法進行攔截。具體程式碼可參考本專案。

2、如何統計頁面所有資源效能詳情（包括非同步ajax和圖片），瀏覽器api能搞定嗎？

在頁面所有非同步資源載入完畢之前，performance.getEntriesByType('resource') 方法得到的資源列表都是不完整的，如何儘可能的保證完整呢？

頁面的非同步資源主要有兩種：一種是ajax，另一種是圖片，針對於ajax我們可以使用方法1得到最終的載入時間，對於圖片我們可以獲取當前頁面所有圖片資源列表，建立new Image()物件得到最終的時間。最後比較圖片和ajax的載入時間，誰更長就代表誰更接近（或是）頁面載入最終完成時間，如果圖片和ajax資源都沒有那就是用window.onload，最終呼叫performance.getEntriesByType('resource')得到最終的資源列表。

3、如何知道一個使用者訪問了哪些頁面，訪問深度何如，怎麼跟蹤記錄

跨域打cookie，一個cookie代表使用者資訊，同一個會話視窗此值不會再改變，另一個cookie關聯同一頁面的效能資料，訪問者資訊，錯誤資訊標識等，此cookie會跟著頁面改變而改變

4、獲取使用者IP網路資訊使用的第三方介面，如何能更好的做好快取，解決使用者每次訪問都呼叫的問題

一：同上一題（3）可以打cookie，若有cookie者不用再請求，

二：根據代表使用者cookie的值去查詢後端快取裡第一次請求後的ip，運營商資訊。

5、一個頁面資源，ajax，js同時報錯，如何全部抓取並記錄下來

寫三個監控，一個監控XMLHttpRequest獲得ajax錯誤資訊，一個監控window.onerror獲得頁面js報錯資訊，還有一個監聽error事件獲得頁面資源報錯資訊。

6、如何解決資料頻繁寫入資料量太大的問題，資料庫應該怎麼設計或處理

一：寫定時任務，每晚幾點鐘對資料表進行備份，統計，或刪除

二：一個站點建立一張資料表

三：頁面給sql視窗或按鈕，手動進行相應的任務

四：叢集處理（這個沒那麼大量，有些時候並不是所有資料都需要儲存，公司也沒那麼多伺服器，一般不考慮）