Auto Commit

src/App.vue

@@ -2,11 +2,25 @@
 
 
 <script setup>
-import { ref, onBeforeMount } from "vue";
+import { ref, onBeforeMount, reactive } 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";
+import { useStore } from "vuex";
+
+dayjs.locale("zh-cn");
+const locale = ref(zhCN);
+
+const findAppCount = ref(0)
+const store = useStore();
+
+const state = reactive({
+  performanceConfig: {
+
+  }
+})
+
 /** 下载图片 */
 const downloadBase64 = (content, fileName) => {
   const base64ToBlob = function (code) {
@@ -46,24 +60,38 @@ const shotAction = () => {
   });
 }
 
-dayjs.locale("zh-cn");
-const locale = ref(zhCN);
-
-const findAppCount = ref(0)
 
 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())
+    const listenDomChange = new ListenDomChange()
+    // state.performanceConfig = {
+    //   ...state.performanceConfig,
+    //   ...listenDomChange.getPerformance()
+    // }
+    console.log('appDom', appDom)
+    listenDomChange.mutationAction(appDom, () => {
+      console.log('第一次渲染', performance.now())
+      state.performanceConfig = {
+        ...state.performanceConfig,
+        fmp: performance.now()
+      }
+      store.commit("common/setPerformanceConfig", { ...state.performanceConfig });
+    })
   }
   else if (findAppCount <= 1000) {
     findAppDom()
   }
 }
 onBeforeMount(() => {
+  // 白屏时间
+  const fp = performance.now()
+  state.performanceConfig = {
+    ...state.performanceConfig,
+    fp: fp
+  }
   findAppDom();
 })
 </script>

src/components/visualPerformance/index.vue

 <script lang="js" setup>
 import { reactive, onMounted } from 'vue';
 import * as echarts from 'echarts';
+
+import { useStore } from "vuex";
+
+const store = useStore();
 const state = reactive({
     leftTitle: '原生的performance',
     leftDomId: 'visual-performance-id',
@@ -26,8 +30,8 @@ const initLeftChart = () => {
     console.log(Object.keys(performance.timing))
     const label = []
     const data = []
-    for ( let key in performance.timing) {
-        if (key!='toJSON') {
+    for (let key in performance.timing) {
+        if (key != 'toJSON') {
             label.push(key)
             data.push(performance.timing[key])
         }
@@ -87,10 +91,22 @@ const initRightChart = () => {
     else {
         return
     }
+
+    const performanceConfig = store.getters["common/performanceConfig"]
+
+    console.log('performanceConfig________________', performanceConfig)
+
+    const label = []
+    const data = []
+
+    Object.keys(performanceConfig).forEach(key => {
+        data.push(performanceConfig[key])
+        label.push(key)
+    })
     const myChart = echarts.init(domInstance);
     const option = {
         title: {
-            text: state.chartTitle
+            text: '自定义计算fmp'
         },
         tooltip: {
             trigger: 'axis',
@@ -111,13 +127,13 @@ const initRightChart = () => {
         },
         yAxis: {
             type: 'category',
-            data: ['fmp', 'fp', 'dns', 'res', 'dom']
+            data: label
         },
         series: [
             {
-                name: '2011',
+                name: 'fmp计算',
                 type: 'bar',
-                data: [18203, 23489, 29034, 104970, 131744]
+                data: data
             }
         ]
     };
@@ -141,16 +157,43 @@ onMounted(() => {
 <template>
     <div>
 
-        <div style="display:flex;justify-content: space-between;">
+        <div style="display:flex;">
             <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;margin-left:20px">
+                <div :id="state.rightDomId" style="width: 500px;height:600px;">
+
+                </div>
+                <div>
+
+                </div>
+
             </a-card>
+            <a-card style="margin-left:20px" title="定义">
+                <div>
+                    <div>
+                        fetchStart：浏览器发起资源请求时，有缓存时，则返回读取缓存的开始时间。<br>
+
+                        domainLookupStart：查询 DNS 的开始时间。<br>
+
+                        domainLookupEnd：查询 DNS 的结束时间。<br>
+
+                        connectStart：浏览器开始与服务器连接时的时间。<br>
+
+                        secureConnectionStart：如果页面使用 HTTPS，它的值是安全连接握手之前的时刻。<br>
+
+                        connectEnd：当浏览器端完成与服务器端建立连接的时刻。<br>
+
+                        responseStart：指客户端收到从服务器端（或缓存、本地资源）响应回的第一个字节的数据的时刻。<br>
 
-            <a-card :title="state.rightTitle" style="width: 600px">
-                <div :id="state.rightDOmId" style="width: 500px;height:600px;">
+                        responseEnd：指客户端收到从服务器端（或缓存、本地资源）响应回的最后一个字节的数据的时刻。<br>
 
+                    </div>
                 </div>
             </a-card>
         </div>

src/main.js

@@ -4,8 +4,10 @@ import Antd from 'ant-design-vue';
 import 'ant-design-vue/dist/antd.css';
 import './assets/main.css'
 import Router from "./router/index.js";
+import store from "./store/index.js";
 
 createApp(App)
 .use(Antd)
+.use(store)
 .use(Router)
 .mount('#app')

src/store/index.js

+// @ts-ignore
+import { createStore, createLogger } from "vuex";
+import common from "./modules/common";
+
+const debug = process.env.NODE_ENV !== "production";
+
+export default createStore({
+  modules: {
+    common,
+  },
+  strict: debug,
+  plugins: debug ? [createLogger()] : [],
+});

src/store/modules/common.js

+
+
+const state = () => ({
+    performanceConfig: {
+
+    }
+});
+const getters = {
+    performanceConfig: (state) => {
+        return state.performanceConfig;
+    }
+};
+
+const mutations = {
+    setPerformanceConfig(state, payload) {
+        console.log('payload', payload)
+        state.performanceConfig = payload;
+    }
+}
+
+const actions = {
+    setPerformanceConfigAction({ commit, state }, payload) {
+        commit("setPerformanceConfig", payload);
+    },
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations,
+};  
\ No newline at end of file

src/utils/index.js

 class ListenDomChange {
-    //   监听 dom 节点
-    dom = null;
     // observer
-    observer = null;
+    observer = null
     // performance
-    performanceConfig = {};
+    performanceConfig = {}
 
-    constructor(dom, callbackDomChange) {
-        this.dom = dom;
-        this.callbackDomChange = callbackDomChange;
+    constructor() {
         // 初始化为{}
         this.performanceConfig = {}
         // 计算performanceConfig
         this.calcPerformance()
-        this.mutationListen()
     }
 
 
@@ -61,14 +56,15 @@ class ListenDomChange {
     }
 
     // 监听 dom变化
-    mutationListen() {
+    mutationAction(listenDom, callbackAction) {
+        console.log('listenDom', listenDom)
         // 观察器的配置（需要观察什么变动）
         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('listenDom', listenDom)
+            const renderHeight = listenDom.offsetHeight
 
             console.log('renderHeight_____________', renderHeight)
             console.log('change_______________', mutationsList)
@@ -82,24 +78,19 @@ class ListenDomChange {
             // }
 
             if (parseInt(renderHeight)) {
-                this.setPerformance('fmp', performance.now())
-                this.clearObserver()
+                // 第一次监听dom 存在高度则判定已经渲染完root节点，不关注子节点
+                callbackAction()
+                // 停止观察
+                observer.disconnect();
             }
-
-
         };
 
         // 创建一个观察器实例并传入回调函数
-        this.observer = new MutationObserver(callback);
-
+        const observer = new MutationObserver(callback);
         // 以上述配置开始观察目标节点
-        this.observer.observe(this.dom, config);
+        observer.observe(listenDom, config);
 
     }
-    // 可停止观察
-    clearObserver() {
-        this.observer.disconnect();
-    }
 }
 
 export {