開發完初版前端性能監控系統後的總結(無代碼)

（不管什麼時候我都是一個實踐派）

提及前端性能監控系統，絕大部分人應該不陌生，也許你正在使用，又或者你只是據說過。總之它就是這樣頻繁的出如今咱們的工做之中。

那麼作一個前端性能監控系統，咱們應該統計一些什麼維度的信息呢？那些數據真正對於咱們有用呢？它適用的場景又有哪些呢？有不少的問題須要回答，再作以前咱們應該回答一些問題，若是這些問題不能回答出來那就不要輕易去嘗試。如下是我以爲須要想明白的一些問題。

先想明白一些問題

• 咱們爲何須要前端性能監控系統，是公司產品真的須要仍是開發着玩玩？
• 業界有那麼多的成熟產品，我能夠直接使用嗎？本身作一個是更好的方案嗎？
• 咱們應該統計一些什麼緯度的信息？你肯定你統計的數據的準確性嗎？
• 你設計的這些維度信息，對於咱們開發真的有參考價值嗎？
• 你開發的產品可以推廣給公司團隊使用嗎？別人須要你這個產品嗎？他會配合你嗎？
• 若是開始作，你瞭解過團隊中其餘人的需求嗎？他們有沒有什麼意見對你有參考價值？
• 能對你或者團隊在技術上有什麼提高嗎？有服務器資源嗎？後期有迭代的打算嗎？
• 能帶領團隊中其餘人一塊兒作嗎？對他們是否有吸引力？

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

那麼咋們開始作吧

一個產品開始作以前咱們應該想明白一些技術上或者UI上的一些問題

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

在技術上咱們要解決核心的統計問題，好比統計頁面性能數據的API：performance，performance兼容IE9以上的瀏覽器，performance.timing統計頁面性能，performance.getEntriesByType('resource') 統計頁面資源性能。window.onerror統計頁面錯誤信息。

開發中遇到的問題：

• 如何統計頁面全部AJAX性能數據，如何知道全部AJAX已加載完畢

• 如何統計頁面全部資源性能詳情（包括異步ajax和圖片），瀏覽器api能搞定嗎

• 如何知道一個用戶訪問了哪些頁面，訪問深度何如，怎麼跟蹤記錄

• 獲取用戶IP網絡信息使用的第三方接口，如何能更好的作好緩存，解決用戶每次訪問都調用的問題

• 一個頁面資源，ajax，js同時報錯，如何所有抓取並記錄下來

• 如何解決數據頻繁寫入數據量太大的問題，數據庫應該怎麼設計或處理

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

一、如何統計頁面全部AJAX性能數據，如何知道全部AJAX已加載完畢？

因爲頁面中ajax基本都是異步加載，所以咱們並不能肯定頁面上的ajax是否真的已經加載完畢，window.onload並不能解決咱們的問題。

鑑於絕大部分網頁的ajax都是用的XMLHttpRequest對象，咱們能夠在頁面加載之處從新定義XMLHttpRequest對象，對open，onload，onreadystatechange方法進行攔截。具體代碼可參考本項目。

二、如何統計頁面全部資源性能詳情（包括異步ajax和圖片），瀏覽器api能搞定嗎？

在頁面全部異步資源加載完畢以前，performance.getEntriesByType('resource') 方法獲得的資源列表都是不完整的，如何儘量的保證完整呢？

頁面的異步資源主要有兩種：一種是ajax，另外一種是圖片，針對於ajax咱們可使用方法1獲得最終的加載時間，對於圖片咱們能夠獲取當前頁面全部圖片資源列表，創建new Image()對象獲得最終的時間。最後比較圖片和ajax的加載時間，誰更長就表明誰更接近（或是）頁面加載最終完成時間，若是圖片和ajax資源都沒有那就是用window.onload，最終調用performance.getEntriesByType('resource')獲得最終的資源列表。

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

跨域打cookie，一個cookie表明用戶信息，同一個會話窗口此值不會再改變，另外一個cookie關聯同一頁面的性能數據，訪問者信息，錯誤信息標識等，此cookie會跟着頁面改變而改變

四、獲取用戶IP網絡信息使用的第三方接口，如何能更好的作好緩存，解決用戶每次訪問都調用的問題

一：同上一題（3）能夠打cookie，如有cookie者不用再請求，

二：根據表明用戶cookie的值去查找後端緩存裏第一次請求後的ip，運營商信息。

五、一個頁面資源，ajax，js同時報錯，如何所有抓取並記錄下來

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

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

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

二：一個站點創建一張數據表

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

四：集羣處理（這個沒那麼大量，有些時候並非全部數據都須要儲存，公司也沒那麼多服務器，通常不考慮）

就這樣結尾了：全程無代碼！！！

附屬github地址：github.com/wangweiange…

附上幾張效果圖：

關注個人博客：zane的我的博客

原文地址：開發完初版前端性能監控系統後的總結