feat: 添加时间信息

src/helpers/calcSpeed.ts

@@ -123,7 +123,9 @@ export type GradualItem = {
  */
 export const getGradualLengthByXml = (xml: string) => {
 	const firstPartXml = onlyVisible(xml, 0, 'calc')
+	console.time('解析xml 耗时2')
 	const xmlParse = new DOMParser().parseFromString(firstPartXml, "text/xml");
+	console.time('解析xml 耗时2')
 	const measures = Array.from(xmlParse.querySelectorAll("measure"));
 	const notes = Array.from(xmlParse.querySelectorAll("note"));
 	const words = Array.from(xmlParse.querySelectorAll("words"));

src/helpers/formateMusic.ts

@@ -251,7 +251,9 @@ export const getCustomInfo = (xml: string): CustomInfo => {
 		showSpeed: true,
 		parsedXML: xml,
 	};
+	console.time('解析xml 耗时3')
 	const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
+	console.timeEnd('解析xml 耗时3')
 	const words: any = xmlParse.getElementsByTagName("words");
 	for (const word of words) {
 		if (word && word.textContent?.trim() === "隐藏速度") {
@@ -361,7 +363,9 @@ export const onlyVisible = (xml: string, partIndex: number, resourceType?: strin
 	if (!xml) return "";
 	// console.log('原始xml')
 	const detailId = state.examSongId + "";
+	console.time('解析xml 耗时4')
 	const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
+	console.timeEnd('解析xml 耗时4')
 	const partList = xmlParse.getElementsByTagName("part-list")?.[0]?.getElementsByTagName("score-part") || [];
 	const partListNames = Array.from(partList).map((item) => item.getElementsByTagName("part-name")?.[0]?.textContent?.trim() || "");
 	const parts: any = xmlParse.getElementsByTagName("part");
@@ -531,7 +535,9 @@ export const onlyVisible2 = (xml: string): string => {
 	if (!xml) return "";
 	// console.log('原始xml')
 	//const detailId = state.examSongId + "";
+	console.time('解析xml 耗时5')
 	const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
+	console.timeEnd('解析xml 耗时5')
 	const partList = xmlParse.getElementsByTagName("part-list")?.[0]?.getElementsByTagName("score-part") || [];
 	//const partListNames = Array.from(partList).map((item) => item.getElementsByTagName("part-name")?.[0]?.textContent?.trim() || "");
 	//state.partListNames = partListNames;
@@ -624,7 +630,9 @@ export const formatZoom = (num = 1) => {
 /** 妙极客多分轨的曲子，可能没有part-name标签，需要手动加上该标签 */
 export const xmlAddPartName = (xml: string) => {
 	if (!xml) return "";
+	console.time('解析xml 耗时')
 	const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
+	console.timeEnd('解析xml 耗时')
 	const scoreParts = Array.from(xmlParse.getElementsByTagName("score-part"));
 	for (const scorePart of scoreParts) {
 		if (scorePart.getElementsByTagName("part-name").length === 0) {
@@ -646,8 +654,9 @@ export const xmlAddPartName = (xml: string) => {
  */
 export const formatXML = (xml: string, xmlUrl?: string): string => {
 	if (!xml) return "";
+	console.time('解析xml 耗时7')
 	const xmlParse = new DOMParser().parseFromString(xml, "text/xml");
-
+	console.timeEnd('解析xml 耗时7')
 	// 声调
 	const fifths = xmlParse.getElementsByTagName("fifths");
 	if (fifths && fifths.length) {

src/page-instrument/App.tsx

@@ -125,6 +125,56 @@ export default defineComponent({
       //     event.preventDefault();
       //   }
       // });
+
+      /**
+       * DNS 解析耗时: domainLookupEnd - domainLookupStart
+       * TCP 连接耗时: connectEnd - connectStart
+       * SSL 安全连接耗时: connectEnd - secureConnectionStart
+       * 网络请求耗时 (TTFB): responseStart - requestStart
+       *数据传输耗时: responseEnd - responseStart
+        *DOM 解析耗时: domInteractive - responseEnd
+        *资源加载耗时: loadEventStart - domContentLoadedEventEnd
+        *First Byte时间: responseStart - domainLookupStart
+        *白屏时间: responseEnd - fetchStart
+        *首次可交互时间: domInteractive - fetchStart
+        *DOM Ready 时间: domContentLoadEventEnd - fetchStart
+        *页面完全加载时间: loadEventStart - fetchStart
+        *http 头部大小： transferSize - encodedBodySize
+        *重定向次数：performance.navigation.redirectCount
+        *重定向耗时: redirectEnd - redirectStart
+       */
+        window.onload = function() {
+          console.log('加载完成')
+          let timing: any = performance.getEntriesByType('navigation')[0];
+          const { domainLookupEnd, domainLookupStart, connectEnd, connectStart, responseStart,
+            requestStart, responseEnd, domInteractive, loadEventStart, domContentLoadedEventEnd,
+            fetchStart, secureConnectionStart, transferSize, encodedBodySize,
+            redirectEnd, redirectStart
+          } = timing
+          //console.log(timing.domInteractive);
+          //console.log(timing.fetchStart);
+          let diff = timing.domInteractive - timing.fetchStart;
+          //console.log("TTI: " + diff);
+          const timeInfo = [
+            { '类型': 'DNS 解析耗时', '耗时': domainLookupEnd - domainLookupStart},
+            { '类型': 'TCP 连接耗时', '耗时': connectEnd - connectStart},
+            { '类型': 'SSL 安全连接耗时', '耗时': connectEnd - secureConnectionStart},
+            { '类型': '网络请求耗时', '耗时': responseStart - requestStart},
+            { '类型': '数据传输耗时', '耗时': responseEnd - responseStart},
+            { '类型': 'DOM 解析耗时', '耗时': domInteractive - responseEnd},
+            { '类型': '资源加载耗时', '耗时': loadEventStart - domContentLoadedEventEnd},
+            { '类型': 'First Byte时间', '耗时': responseStart - domainLookupStart},
+            { '类型': '白屏时间', '耗时': responseEnd - fetchStart},
+            { '类型': '首次可交互时间', '耗时': domInteractive - fetchStart},
+            { '类型': 'DOM Ready 时间', '耗时': domContentLoadedEventEnd - fetchStart},
+            { '类型': '页面完全加载时间', '耗时': loadEventStart - fetchStart},
+            { '类型': 'http 头部大小', '耗时': transferSize - encodedBodySize},
+            { '类型': '重定向次数', '耗时': performance.navigation.redirectCount},
+            { '类型': '重定向耗时', '耗时': redirectEnd - redirectStart},
+          ];
+          console.table(timeInfo);
+          
+        };
     });
 
     onUnmounted(() => {

src/page-instrument/view-detail/index.tsx

@@ -117,6 +117,7 @@ export default defineComponent({
         }
       }
     };
+    console.time('加载过程')
     onBeforeMount(async () => {
       // console.time("渲染加载耗时");
       api_keepScreenLongLight();
@@ -209,6 +210,7 @@ export default defineComponent({
     const handleRendered = (osmd: any) => {
       api_cloudLoading();
       console.timeEnd("渲染加载耗时");
+      console.timeLog('加载过程','谱面渲染完成')
       detailData.skeletonLoading = false;
       state.osmd = osmd;
       // 没有设置速度使用读取的速度

src/state.ts

@@ -1534,7 +1534,9 @@ const getMusicInfo = async (res: any) => {
 //获取xml中的音轨数据
 function xmlToTracks(xmlString: string) {
   //console.time('domparse')
+  console.time('解析xml 耗时1')
   const xmlParse = new DOMParser().parseFromString(xmlString, "text/xml");
+  console.timeEnd('解析xml 耗时1')
   //console.timeEnd('domparse')
   const partNames = Array.from(xmlParse.getElementsByTagName('part-name'));
   return partNames.reduce((arr: string[], item) => {

src/view/audio-list/index.tsx

@@ -547,7 +547,7 @@ export default defineComponent({
 				return
 			}			
 			if (state.playMode !== "MIDI") {
-				console.time("音频加载时间123")
+				console.time("音频加载耗时")
 				// 处理音源
 				const [music, accompany, fanSong, banSong, mingSong, mingSongGirl] = await loadAudio()
 				audioData.backgroundEle = accompany;
@@ -641,7 +641,8 @@ export default defineComponent({
 
 				state.audioDone = true;
 				state.isLoading = false
-				console.timeEnd("音频加载时间123")
+				console.timeEnd("音频加载耗时")
+				console.timeLog('加载过程','音频加载完成')
 				console.log("音频数据：",audioData)
 				api_playProgress(progress);
 			} else {
@@ -654,6 +655,7 @@ export default defineComponent({
 				// 监听midi播放结束
 				api_cloudplayed(midiPlayEnd);
 			}
+			console.timeEnd('加载过程')
 		});
 		onUnmounted(() => {
 			api_remove_cloudplayed(midiPlayEnd);

src/view/music-score/index.tsx

@@ -73,6 +73,7 @@ export default defineComponent({
 			if(!downloadXmlStr.value){
 				downloadXmlStr.value = await fetch(state.xmlUrl).then((response) => response.text())
 			}
+			console.time('增删改查xml')
 			const xmlStr = downloadXmlStr.value;
 			const parseXmlInfo = getCustomInfo(xmlStr);
 			const xml = formatXML(parseXmlInfo.parsedXML);
@@ -80,6 +81,7 @@ export default defineComponent({
 			if (state.gradualTimes) {
 				state.gradual = getGradualLengthByXml(xml);
 			}
+			console.timeEnd('增删改查xml')
 		};
 
 		const init = async () => {

src/view/selection/index.tsx

@@ -277,11 +277,14 @@ export default defineComponent({
 			}
 			return []
 		})
-
+		console.time('dom挂载')
 		onMounted(() => {
+			console.timeEnd('dom挂载')
 			selectData.notes = [];
 			selectData.staves = [];
+			console.time('添加dom时间')
 			calcNoteData();
+			console.timeEnd('添加dom时间')
 			const img: HTMLElement = document.querySelector('#cursorImg-0')!
 			if (metronomeData.cursorMode === 2){
 				img.classList.add('lineHide')

vite.config.ts

@@ -35,6 +35,14 @@ export default defineConfig({
     },
   },
   build: {
+    minify: 'terser', // 启用 terser 压缩  
+    terserOptions: {  
+        compress: {  
+            pure_funcs: ['console.log'], // 只删除 console.log 
+            //drop_console: true, // 删除所有 console
+            drop_debugger: true, // 删除 debugger  
+        }  
+    },
     rollupOptions: {
       input: {
         instrument: resolve(__dirname, "instrument.html"),