perf:

src/lib/monitor.js

 import * as rrweb from "rrweb";
 import TracksWorker from "./tracks.worker";
 import { getPureHash } from "./utils";
+var fpsList = [];
+
 class Monitor {
   rrwebHandler = null;
   initialized = false;
   listenedRoute = false;
   tracksWorker = new TracksWorker();
-  init({ system, userIdentifier, host = [], env = "prod", log = false, path = "/", }) {
+  constructor() {
+    (() => {
+      var lastTime = performance.now();
+      var frame = 0;
+      var lastFameTime = performance.now();
+      var loop = function(time) {
+        var now = performance.now();
+        var fs = now - lastFameTime;
+        lastFameTime = now;
+        var fps = Math.round(1000 / fs);
+        frame++;
+        if (now > 1000 + lastTime) {
+          var fps = Math.round((frame * 1000) / (now - lastTime));
+          frame = 0;
+          fpsList.push(fps);
+          lastTime = now;
+        }
+        window.requestAnimationFrame(loop);
+      };
+    })();
+    function isBlocking(fpsList, below, last) {
+      var count = 0;
+      for (var i = 0; i < fpsList.length; i++) {
+        if (fpsList[i] && fpsList[i] < below) {
+          count++;
+        } else {
+          count = 0;
+        }
+        if (count >= last) {
+          return true;
+        }
+      }
+      return false;
+    }
+    setInterval(() => {
+      if (isBlocking(fpsList, 30, 8)) {
+        this.stop();
+      }
+    }, 10000);
+  }
+
+  init({ system, userIdentifier, host = [], env = "prod", log = false, path = "/" }) {
     let protocol = document.location.protocol;
     let realHost = window.location.host;
     if (!system || !userIdentifier || host.length > 0) {
       console.error("system,userIdentifier,host是必传的");
     }
-    if(host.includes(realHost)) {
+    if (host.includes(realHost)) {
       if (!this.initialized) {
         this.tracksWorker.postMessage({
           type: "init",
@@ -22,7 +65,7 @@ class Monitor {
             userIdentifier,
             env,
             log,
-            protocol
+            protocol,
           },
         });
         this.initialized = true;
@@ -31,15 +74,15 @@ class Monitor {
         this.reset({ userIdentifier });
       }
       this.listenOnHash();
-      this.tracksWorker.onmessage = (event) => {
-        switch(event.data) {
+      this.tracksWorker.onmessage = event => {
+        switch (event.data) {
           case "resetRecord":
             this.record(); // 开启录制
             break;
           default:
             console.log("unknow action", event.data);
         }
-      }
+      };
     } else {
       console.error("当前的系统并不是线上环境，不做特殊录制");
     }
@@ -59,7 +102,7 @@ class Monitor {
     console.log("开始录制");
     this.rrwebHandler = rrweb.record({
       emit: event => {
-        this.tracksWorker.postMessage({ type: "record", payload: event });
+        this.tracksWorker.postMessage({ type: "record", payload: { ...event, fps: fpsList.pop() } });
       },
     });
   }
@@ -74,12 +117,12 @@ class Monitor {
     window.addEventListener("hashchange", () => {
       // 忽略hash后的query
       let hash = getPureHash(location.hash);
-      if (hash === preHash) return console.log('hash query 无变化，no reset');;
+      if (hash === preHash) return console.log("hash query 无变化，no reset");
       preHash = hash;
       //防抖，防止无效的频繁触发
       clearTimeout(timer);
       timer = setTimeout(() => {
-        console.log('hashchange reset');
+        console.log("hashchange reset");
         // 路由跳转的前关闭录制
         this.stop();
         this.reset({ path: location.hash });
@@ -103,7 +146,7 @@ class Monitor {
    */
   reset(event) {
     console.log("重置数据");
-    this.tracksWorker.postMessage({ type: "reset", payload: event })
+    this.tracksWorker.postMessage({ type: "reset", payload: event });
   }
 }