前端效能監控你會監控哪些資料 如何做

2021-09-19 08:34:29 字數 908 閱讀 3169

為什麼要做效能監控

對於公司來說,效能在一定程度上與利益直接相關

為什麼效能會影響公司的收益呢?根本原因還是在於效能影響了使用者體驗。載入的延遲、操作的卡頓等都會影響使用者的使用體驗。尤其是移動端,使用者對頁面響應延遲和連線中斷的容忍度很低。想象一下你拿著手機開啟乙個網頁想看到某個資訊卻載入半天的心情,你很可能選擇直接離開換乙個網頁。谷歌也將頁面載入速度作為 seo 的乙個權重

哪些點需要監控

我們可以分為以下幾個點來進行監控

白屏時間

白屏時間是使用者首次看到內容的時間,也叫做首次渲染時間,chrome 高版本有 firstpainttime 介面來獲取這個耗時,但大部分瀏覽器並不支援,必須想其他辦法來監測。仔細觀察 webpagetest 檢視分析發現,白屏時間出現在頭部外鏈資源載入完附近,因為瀏覽器只有載入並解析完頭部資源才會真正渲染頁面。基於此我們可以通過獲取頭部資源載入完的時刻來近似統計白屏時間

**理解

首屏時間

首屏時間的統計比較複雜,因為涉及等多種元素及非同步渲染等方式。觀察載入檢視可發現,影響首屏的主要因素的的載入。通過統計首屏內的載入時間便可以獲取首屏渲染完成的時間。統計流程如下

首屏位置呼叫api 開始統計->

繫結首屏內所有的 load 事件->

頁面載入完後判斷是否在首屏內,找出載入最慢的一張->

首屏時間

可操作時間

使用者可操作預設可以統計domready時間,因為通常會在這時候繫結事件操作。對於使用了模組化非同步載入的 js 可以在**中去主動標記重要 js 的載入時間,這也是產品指標的統計方式

總結如果你在很年輕的時候,就遭受到了失敗,一定要把它當作老天送你的禮物。如果等到四十歲再失敗,你會經受不起的。為什麼年紀越大,走路越小心,因為越來越經不起跌倒了。

原文

前端效能監控

王海洋 前端 關注 這類題有兩種問法,開門見山問你如果錯誤監控。或者問你如何保證產品質量。產品上線,線上錯誤如果都不能自動收集上來,怎麼保證產品質量體系。其實考察的都是錯誤監控。兩種捕獲 第一種通過try catch部署到 中。第二個window.onerror 這個是dom0的,也可以用addev...

前端資料監控

上報資料形式 上報完,各種資料怎麼處理?例子 為什麼要資料監控平台?各維度資料量化,去衡量真實使用者的載入速度 監控平台鏈路 sdk上報,上報到伺服器和資料儲存 接收上報心想 資料清洗 入庫 展示分析 監控指標 資料採集流程 上報 收集 清洗 入庫 在head標籤中嵌入上報資料的sdk指令碼 收集哪...

前端一些效能監控工具

通過這些簡單的工具我們可以檢測pc端任何產品的前端效能指標 一般檢視哪些指標呢?cpu 記憶體 私有記憶體,共享記憶體,工作集記憶體,提交大小,等,你都可以根據你專案選擇指定的指標 這些資料的動態變化的,你可以在一開始記錄一下,然後每隔30s和2min記錄一次,和持續記錄10 15分鐘的 多輪記錄,...