Sat Mar 9 23:41:00 CST 2024 inscode

src/App.vue

@@ -55,8 +55,9 @@ const findAppDom = () => {
   const appDom = document.getElementById('app')
   findAppCount.value += 1
   if (appDom) {
+    console.log('appDom', appDom)
     const listenDomChange = new ListenDomChange(appDom)
-    console.log('getPerformance',listenDomChange.getPerformance())
+    console.log('getPerformance', listenDomChange.getPerformance())
   }
   else if (findAppCount <= 1000) {
     findAppDom()

src/utils/index.js

@@ -15,37 +15,7 @@ class ListenDomChange {
         this.calcPerformance()
         this.mutationListen()
     }
-    // 监听 dom变化
-    mutationListen() {
-        // 选择需要观察变动的节点
-        const targetNode = this.dom
-
-        // 观察器的配置（需要观察什么变动）
-        const config = { attributes: true, childList: true, subtree: true };
 
-        // 当观察到变动时执行的回调函数
-        const callback = function (mutationsList, observer) {
-            console.log('change_______________', mutationsList)
-            // Use traditional 'for loops' for IE 11
-            for (let mutation of mutationsList) {
-                if (mutation.type === "childList") {
-                    console.log("A child node has been added or removed.");
-                } else if (mutation.type === "attributes") {
-                    console.log("The " + mutation.attributeName + " attribute was modified.");
-                }
-            }
-
-        };
-
-        // 创建一个观察器实例并传入回调函数
-        this.observer = new MutationObserver(callback);
-
-        // 以上述配置开始观察目标节点
-        this.observer.observe(targetNode, config);
-
-        // 之后，可停止观察
-        this.observer.disconnect();
-    }
 
     getPerformance() {
         return this.performanceConfig
@@ -89,6 +59,47 @@ class ListenDomChange {
             that.setPerformance(entry.name, domContentLoadedTime)
         });
     }
+
+    // 监听 dom变化
+    mutationListen() {
+        // 观察器的配置（需要观察什么变动）
+        const config = { attributes: true, childList: true, subtree: true };
+        // 当观察到变动时执行的回调函数
+
+        const callback = function (mutationsList, observer) {
+            console.log('this.dom', this.dom)
+            const renderHeight = this.dom.offsetHeight
+
+            console.log('renderHeight_____________', renderHeight)
+            console.log('change_______________', mutationsList)
+            // Use traditional 'for loops' for IE 11
+            // for (let mutation of mutationsList) {
+            //     if (mutation.type === "childList") {
+            //         console.log("A child node has been added or removed.");
+            //     } else if (mutation.type === "attributes") {
+            //         console.log("The " + mutation.attributeName + " attribute was modified.");
+            //     }
+            // }
+
+            if (parseInt(renderHeight)) {
+                this.setPerformance('fmp', performance.now())
+                this.clearObserver()
+            }
+
+
+        };
+
+        // 创建一个观察器实例并传入回调函数
+        this.observer = new MutationObserver(callback);
+
+        // 以上述配置开始观察目标节点
+        this.observer.observe(this.dom, config);
+
+    }
+    // 可停止观察
+    clearObserver() {
+        this.observer.disconnect();
+    }
 }
 
 export {