Wed May 15 09:37:00 CST 2024 inscode

src/App.vue

@@ -10,10 +10,10 @@ import "dayjs/locale/zh-cn";
 import { useStore } from "vuex";
 import {WebPerformance} from 'web-performance-tool';
 onMounted(()=>{
-  const WebPerformanceInstance=new WebPerformance();
-  // 计算性能
-  WebPerformanceInstance.calcPerformance();
-  console.log('性能指标：',WebPerformanceInstance.getPerformance())
+  // const WebPerformanceInstance=new WebPerformance();
+  // // 计算性能
+  // WebPerformanceInstance.calcPerformance();
+  // console.log('性能指标：',WebPerformanceInstance.getPerformance())
 })
 
 dayjs.locale("zh-cn");

src/components/visual/index.vue

 <script setup>
-    import {reactive,onMounted} from 'vue'
-    import CommitLine from './commit/index.vue'
-    import ArticleBar from './article/index.vue'
-    import Author from '../Author.vue'
-    import HubPie from './hub/index.vue'
-    import {articleData} from './data/data.js'
-    const state=reactive({
-        title:'',
-        articleData:[]
-    })
+import { reactive, onMounted, onBeforeMount } from 'vue'
+import CommitLine from './commit/index.vue'
+import ArticleBar from './article/index.vue'
+import Author from '../Author.vue'
+import HubPie from './hub/index.vue'
+import { articleData } from './data/data.js'
+const state = reactive({
+    title: '',
+    articleData: [],
+    echartDuration: 0,
+})
 
-    const getRenderBarData= ()=>{
-        state.articleData=[...articleData]
-        state.articleData.sort((a,b)=>new Date(a.postTime)-new Date(b.postTime))
-    }
-    onMounted(()=>{
+const getRenderBarData = () => {
+    state.articleData = [...articleData]
+    state.articleData.sort((a, b) => new Date(a.postTime) - new Date(b.postTime))
+}
+onBeforeMount(() => {
+    // 标记开始时刻
+    performance.mark('render-echart1-start')
+})
+onMounted(() => {
     getRenderBarData()
-    })
+    // 标记开始时刻
+    performance.mark('render-echart1-end')
+    const measure = performance.measure('render-echart-duration', 'render-echart1-start', 'render-echart1-end')
+    console.log('measure', measure)
+    console.log('measure type', typeof measure)
+    const duration = measure.duration
+    console.log('duration', duration)
+    state.echartDuration = duration.toFixed(2)
+})
 </script>
 <template>
     <div style="padding:20px;">
         <!-- <Author/> -->
         <div>
-            {{state.title}}
+            {{ state.title }}
             <div>
                 <CommitLine />
                 <ArticleBar :tableData="state.articleData" />
                 <HubPie />
             </div>
+            <div>
+                渲染耗时：{{ state.echartDuration }} ms
+            </div>
         </div>
     </div>
 </template>
\ No newline at end of file