Sat Mar 9 21:46:00 CST 2024 inscode

src/App.vue

@@ -2,11 +2,12 @@
 
 
 <script setup>
-  import { ref } from "vue";
-  import zhCN from "ant-design-vue/es/locale/zh_CN";
-  import dayjs from "dayjs";
-  import "dayjs/locale/zh-cn";
-  /** 下载图片 */
+import { ref, onBeforeMount } from "vue";
+import { ListenDomChange } from '@/utils/index'
+import zhCN from "ant-design-vue/es/locale/zh_CN";
+import dayjs from "dayjs";
+import "dayjs/locale/zh-cn";
+/** 下载图片 */
 const downloadBase64 = (content, fileName) => {
   const base64ToBlob = function (code) {
     let parts = code.split(';base64,');
@@ -45,8 +46,25 @@ const shotAction = () => {
   });
 }
 
-  dayjs.locale("zh-cn");
-  const locale = ref(zhCN);
+dayjs.locale("zh-cn");
+const locale = ref(zhCN);
+
+const findAppCount = ref(0)
+
+const findAppDom = () => {
+  const appDom = document.getElementById('app')
+  findAppCount.value += 1
+  if (appDom) {
+    const listenDomChange = new ListenDomChange(appDom)
+    console.log('getPerformance',listenDomChange.getPerformance())
+  }
+  else if (findAppCount <= 1000) {
+    findAppDom()
+  }
+}
+onBeforeMount(() => {
+  findAppDom();
+})
 </script>
 
 
@@ -54,16 +72,16 @@ const shotAction = () => {
   <!--  国际化配置-->
   <a-config-provider :locale="locale">
     <div id="app">
-      <router-view/>
+      <router-view />
     </div>
   </a-config-provider>
 </template>
 
 <style scoped>
-  #app{
-    width: 100vw;
-    height: 100vh;
-    background-size: 100%;
-    background: linear-gradient(rgba(38, 38, 38, 0.5), rgba(40,140,234, 0.6)), url("/static/img/previewFix.jpg") no-repeat center;
-  }
+#app {
+  width: 100vw;
+  height: 100vh;
+  background-size: 100%;
+  background: linear-gradient(rgba(38, 38, 38, 0.5), rgba(40, 140, 234, 0.6)), url("/static/img/previewFix.jpg") no-repeat center;
+}
 </style>

src/components/visualPerformance/index.vue

@@ -2,15 +2,82 @@
 import { reactive, onMounted } from 'vue';
 import * as echarts from 'echarts';
 const state = reactive({
-    title: '性能指标可视化',
+    leftTitle: '原生的performance',
+    leftDomId: 'visual-performance-id',
+
+    rightTitle: '性能指标可视化',
+    rightDomId: 'visual-performance-id-right',
+    chartTitle: '性能指标',
     echartInstance: null,
-    domId: 'visual-performance-id'
+
 })
 
 
-const initChart = () => {
+const initLeftChart = () => {
+    // 基于准备好的dom，初始化echarts实例
+    const domInstance = document.getElementById(state.leftDomId)
+    if (domInstance) {
+        domInstance.removeAttribute('_echarts_instance_')
+    }
+    else {
+        return
+    }
+    console.log(performance)
+    console.log(Object.keys(performance.timing))
+    const label = []
+    const data = []
+    for (let key in performance.timing) {
+        label.push(key)
+        data.push(performance.timing[key])
+    }
+    const myChart = echarts.init(domInstance);
+    const option = {
+        title: {
+            text: 'performance'
+        },
+        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: label
+        },
+        series: [
+            {
+                name: 'performance',
+                type: 'bar',
+                data: data
+            }
+        ]
+    };
+    console.log('option', option)
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option, true);
+    // 监听
+    state.echartInstance = myChart;
+    myChart.on('click', function (params) {
+        console.log('params', params)
+    });
+    window.onresize = myChart.resize;
+}
+
+const initRightChart = () => {
     // 基于准备好的dom，初始化echarts实例
-    const domInstance = document.getElementById(state.domId)
+    const domInstance = document.getElementById(state.rightDomId)
     if (domInstance) {
         domInstance.removeAttribute('_echarts_instance_')
     }
@@ -20,7 +87,7 @@ const initChart = () => {
     const myChart = echarts.init(domInstance);
     const option = {
         title: {
-            text: 'World Population'
+            text: state.chartTitle
         },
         tooltip: {
             trigger: 'axis',
@@ -62,18 +129,28 @@ const initChart = () => {
     window.onresize = myChart.resize;
 }
 
+
 onMounted(() => {
-    initChart()
+    initLeftChart()
+    initRightChart()
 })
 </script>
 <template>
     <div>
 
-        <a-card :title="state.title" style="width: 900px">
-            <div :id="state.domId" style="width: 800px;height:600px;">
+        <div style="display:flex;justify-content: space-between;">
+            <a-card :title="state.leftTitle" style="width: 600px">
+                <div :id="state.leftDomId" style="width: 500px;height:600px;">
+
+                </div>
+            </a-card>
+
+            <a-card :title="state.rightTitle" style="width: 600px">
+                <div :id="state.rightDOmId" style="width: 500px;height:600px;">
 
-            </div>
-        </a-card>
+                </div>
+            </a-card>
+        </div>
 
     </div>
 </template>
\ No newline at end of file

src/utils/index.js

@@ -10,9 +10,10 @@ class ListenDomChange {
         this.dom = dom;
         this.callbackDomChange = callbackDomChange;
         // 初始化为{}
-        this.performanceConfig={}
+        this.performanceConfig = {}
         // 计算performanceConfig
         this.calcPerformance()
+        this.mutationListen()
     }
     // 监听 dom变化
     mutationListen() {
@@ -24,6 +25,7 @@ class ListenDomChange {
 
         // 当观察到变动时执行的回调函数
         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") {
@@ -32,25 +34,25 @@ class ListenDomChange {
                     console.log("The " + mutation.attributeName + " attribute was modified.");
                 }
             }
-            console.log('change', change)
+
         };
 
         // 创建一个观察器实例并传入回调函数
         this.observer = new MutationObserver(callback);
 
         // 以上述配置开始观察目标节点
-        this.observer.observer.observe(targetNode, config);
+        this.observer.observe(targetNode, config);
 
         // 之后，可停止观察
-        this.observer.observer.disconnect();
+        this.observer.disconnect();
     }
 
-    getPerformance(){
-        return performance
+    getPerformance() {
+        return this.performanceConfig
     }
 
-    setPerformance(key,value){
-        this.calcPerformance[key]=value
+    setPerformance(key, value) {
+        this.performanceConfig[key] = value
     }
 
     calcPerformance() {
@@ -70,19 +72,21 @@ 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)
+        this.setPerformance('time to first paint', firstPaint - activationStart)
+        this.setPerformance('time to first-contentful-paint', firstContentfulPaint - activationStart)
 
         const entries = performance.getEntriesByType("navigation");
+        const that = this
         entries.forEach((entry) => {
             console.log(`${entry.name}: domComplete time: ${entry.domComplete}ms`);
+            that.setPerformance('domComplete time', entry.domComplete)
 
             const domContentLoadedTime =
                 entry.domContentLoadedEventEnd - entry.domContentLoadedEventStart;
             console.log(
                 `${entry.name}: DOMContentLoaded processing time: ${domContentLoadedTime}ms`,
             );
-            setPerformance(entry.name,domContentLoadedTime)
+            that.setPerformance(entry.name, domContentLoadedTime)
         });
     }
 }