Sat Mar 9 20:57:00 CST 2024 inscode

src/components/visualPerformance/index.vue

-<script lang="ts" setup>
-import { reactive } from 'vue';
-const state: any = reactive({
-    title: '性能指标可视化'
+<script lang="js" setup>
+import { reactive, onMounted } from 'vue';
+import * as echarts from 'echarts';
+const state = reactive({
+    title: '性能指标可视化',
+    echartInstance: null,
+    domId: 'visual-performance-id'
+})
+
+
+const initChart = () => {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance = document.getElementById(state.domId)
+    if (domInstance) {
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else {
+        return
+    }
+    const myChart = echarts.init(domInstance);
+    const option = {
+        title: {
+            text: 'World Population'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow'
+            }
+        },
+        legend: {},
+        grid: {
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        xAxis: {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+        },
+        yAxis: {
+            type: 'category',
+            data: ['fmp', 'fp', 'dns', 'res', 'dom']
+        },
+        series: [
+            {
+                name: '2011',
+                type: 'bar',
+                data: [18203, 23489, 29034, 104970, 131744]
+            }
+        ]
+    };
+    console.log('option', option)
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    myChart.on('click', function (params) {
+        console.log('params', params)
+    });
+    window.onresize = myChart.resize;
+}
+
+onMounted(() => {
+    initChart()
 })
 </script>
 <template>
     <div>
 
-        <a-card :title="state.title" style="width: 300px">
-            <div>
-                {{ state.title }}
+        <a-card :title="state.title" style="width: 900px">
+            <div :id="state.domId" style="width: 800px;height:600px;">
+
             </div>
         </a-card>
 

src/utils/index.js

 class ListenDomChange {
-    constructor(dom, callbackDomChange) {
     //   监听 dom 节点
+    dom = null;
+    // observer
+    observer = null;
+    // performance
+    performanceConfig = {};
+
+    constructor(dom, callbackDomChange) {
         this.dom = dom;
-        //   回调函数
         this.callbackDomChange = callbackDomChange;
+        // 初始化为{}
+        this.performanceConfig={}
+        // 计算performanceConfig
+        this.calcPerformance()
     }
     // 监听 dom变化
     mutationListen() {
@@ -23,19 +32,28 @@ class ListenDomChange {
                     console.log("The " + mutation.attributeName + " attribute was modified.");
                 }
             }
+            console.log('change', change)
         };
 
         // 创建一个观察器实例并传入回调函数
-        const observer = new MutationObserver(callback);
+        this.observer = new MutationObserver(callback);
 
         // 以上述配置开始观察目标节点
-        observer.observe(targetNode, config);
+        this.observer.observer.observe(targetNode, config);
 
         // 之后，可停止观察
-        observer.disconnect();
+        this.observer.observer.disconnect();
     }
 
-    getPerformance() {
+    getPerformance(){
+        return performance
+    }
+
+    setPerformance(key,value){
+        this.calcPerformance[key]=value
+    }
+
+    calcPerformance() {
         // Time to when activation occurred
         let activationStart =
             performance.getEntriesByType("navigation")[0].activationStart;
@@ -52,6 +70,20 @@ class ListenDomChange {
         console.log(
             "time to first-contentful-paint: " + (firstContentfulPaint - activationStart),
         );
+        setPerformance('time to first paint',firstPaint - activationStart)
+        setPerformance('time to first-contentful-paint',firstContentfulPaint - activationStart)
+
+        const entries = performance.getEntriesByType("navigation");
+        entries.forEach((entry) => {
+            console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
+
+            const domContentLoadedTime =
+                entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
+            console.log(
+                `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
+            );
+            setPerformance(entry.name,domContentLoadedTime)
+        });
     }
 }