前端工程化——監控

監控有四個點：

  1. 網頁崩潰（crashes）
  2. JavaScript 執行出錯
  3. 網頁卡頓
  4. 首屏渲染

網頁崩潰的監控

使用 service worker 和 setInterval 來實現，參考：如何監控網頁崩潰

JavaScript 執行出錯

使用 sentry 來對上報錯誤即可

網頁卡頓的監控

網頁卡頓就是掉幀，fps 太低了，fps 的監控分為兩部分

  1. 開發時監控，可借助工具：lag-radar
  2. 線上用戶監控，可參考：FPS 測試

關鍵在于，線上用戶監控時，如何上報 fps 數據，有兩種方案：

  1. 開源的前端監控方案：sitespeed.io
  2. 自建數據上報，通過 navigator.sendBeacon 上傳數據

首屏渲染

借助 window.performance API來實現首屏渲染的監控

參考：初探 performance

打開網頁的生命周期
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網絡請求組件 FMDB本地數據庫組件 SD...
    陽明AGI閱讀 16,009評論 3贊 119
  • 一直覺得生孩子是一件很偉大的事情，但從來不知道如此偉大。 我的媽媽懷孕了。快長大的我想著這樣就可以知道女人生孩子是...
    譚銀河閱讀 557評論 0贊 1
  • Key-Value Observing 鍵值對觀察者模式 基于OC強大的Runtime機制和isa-swizzle...
    define南拳閱讀 178評論 0贊 1
  • 靜靜的夜，悄悄的雨 滴滴噠噠輕敲打你的門窗 你是否像我一樣，呆呆的冥想 想著那美好的凝望 黑黑的夜，多情的雨 淅淅...
    雨沐先生閱讀 323評論 0贊 0
  • 命名 在命名python類的時候還是使用class關鍵字來命名。 python類分為兩種：經典類（舊類），新式類 ...
    dangeroussnack閱讀 483評論 0贊 2