史诗级优化（cpu 50% =》 25%）

全都是因为屎山代码（重复刷新存储中的配置文件）↓23% 还有一个之前想用来做颜色块来弄动态背景的图片取色（删咯，切歌不会占太多cpu了）
Project-And-Factory · Jul 3, 2023 · cf1f0b5 · cf1f0b5
1 parent 1a1cc1b
commit cf1f0b5
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 72 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -251,12 +251,8 @@
 	'--color1:' + 	data.player.uiDisplay.color[0]+ ';' + 
 	-->
     </div>
-    <!-- <div v-if="(data.player.uiDisplay.mainDisplay != 'buttom') && config.setting().config.useBlurBackground" :style="{
-        backgroundImage: 'url(' + data.player.tracks[data.player.trackNum].al.picUrl + '?param=128y128'+')',
-        // backgroundColor: this.data.player['musicCache'][id]['backgroundColor'],
-        // fontColor: this.data.player['musicCache'][id]['fontColor']
-      }" v-bind:class="'player-background ' + data.player.uiDisplay.mainDisplay"></div> -->
-    <background :colorData="(this.data.player.musicCache[this.id] != undefined&&this.data.player.musicCache[this.id].color)?this.data.player.musicCache[id].color.background:null" :dynamic="true" :imgSrc="data.player.tracks[data.player.trackNum].al.picUrl" :mainDisplay="data.player.uiDisplay.mainDisplay" />
+
+    <background  :dynamic="true" :imgSrc="data.player.tracks[data.player.trackNum].al.picUrl" :mainDisplay="data.player.uiDisplay.mainDisplay" />
     <!--
         主UI界面      v-bind:style="'background-image:"
       -->
@@ -311,8 +307,7 @@
     <!--display-->
     <div v-bind:class="data.player.uiDisplay.playerSelec + ' playerDisplayOutBox'"
       :style="{
-        'display': data.player.uiDisplay.displayPlayBox,
-    '--music-theme-color': (this.data.player.musicCache[this.id] != undefined&&this.data.player.musicCache[this.id].color)?this.data.player.musicCache[id].color.background[0].color:'#000'
+        'display': data.player.uiDisplay.displayPlayBox
   }">
       <div v-bind:state-playing="state.playing" class="left-side playerIndexSide">
 
@@ -593,7 +588,7 @@
       <div  class="right-side playerIndexSide">
 <!-- {{ (this.data.player.musicCache[this.id] != undefined&&this.data.player.musicCache[this.id].color)?this.data.player.musicCache[this.id].color.background[0].color:'#0008' }} -->
         <div id="lyric">
-          <ul id="lyrics" :style="'--dur:'+config.setting().config.lyricSet.dur +  'ms'" ref="lyricBox"
+          <ul id="lyrics" :style="'--dur:'+configContent.config.lyricSet.dur +  'ms'" ref="lyricBox"
             v-if="data.player.musicCache[id] && this.data.player.musicCache[id].lyric.yrc == false">
             <li @click="audio.currentTime = item.t" v-for="(item,i) in this.data.player.musicCache[id].lyric.ms"
               v-bind:key="item.t">
@@ -605,7 +600,7 @@
 
           <ul id="lyrics" ref="lyricBox"
             :style="{
-              '--dur': config.setting().config.lyricSet.dur +  'ms'
+              '--dur': configContent.config.lyricSet.dur +  'ms'
             }"
             v-if="data.player.musicCache[id] && this.data.player.musicCache[id].lyric.yrc != false">
             <li v-bind:lyricFocus="
@@ -721,6 +716,13 @@
 <script>
   import reTools from './network/getData'
   import config from './js/config.js'
+
+  let configRefresh =  (config)=>{
+      configContent = config
+    }
+  var configContent = config.setting('keepListenning',configRefresh);
+    
+
   import analyze from 'rgbaster'
   import Color from 'color';
   import audioNetease from './js/audioNetease.js'
@@ -795,7 +797,8 @@ import { transform } from '@vue/compiler-core'
     },
     data() {
       return {
-        config,
+        // config,
+        configContent,
         audio: document.createElement('audio'),
         state: {
           playing: false,
@@ -1011,30 +1014,21 @@ import { transform } from '@vue/compiler-core'
             let thisMusic = this.data.player.tracks[(this.data.player.trackNum + witchIs[index])]
             if (thisMusic != undefined && this.data.player.musicCache[thisMusic.id] == undefined) {
 
-              // analyze(thisMusic.al.picUrl + '?param=24y24', {
-              //   ignore: ['rgb(255,255,255)', 'rgb(0,0,0)']
-              // }).then(result => {
-              //   this.data.player['musicCache'][thisMusic.id]['backgroundColor'] = result[0].color
-              //   this.data.player['musicCache'][thisMusic.id]['colorData'] = Color(result[0].color).object()
-              //   // let colordata = 
-              //   // this.data.player['musicCache'][thisMusic.id]['fontColor'] = (colordata.r * 0.299 + colordata.g *
-              //   //     0.587 + colordata.b * 0.114) > 186 ? '#000000' :
-              //   //   '#FFFFFF'
-              // })
-              let color = {
-                font:'#000',
-                background:'#fff'
-              }
-              await picColor(thisMusic.al.picUrl + '?param=24y24').then(result => {
-                  color.background = result
-                    })
-                    let data = Color(color.background[0].color).object()
-                    color.font = (data.r * 0.299 + data.g * 0.587 + data.b * 0.114) > 186 ? '#000000' :
-                        '#FFFFFF'
+
+              // let color = {
+              //   font:'#000',
+              //   background:'#fff'
+              // }
+              // await picColor(thisMusic.al.picUrl + '?param=24y24').then(result => {
+              //     color.background = result
+              //       })
+              //       let data = Color(color.background[0].color).object()
+              //       color.font = (data.r * 0.299 + data.g * 0.587 + data.b * 0.114) > 186 ? '#000000' :
+              //           '#FFFFFF'
 
               this.data.player.musicCache[thisMusic.id] = {
                 ...await audioNetease.requireId(thisMusic.id),
-                color
+                // color
               }
 
             }
@@ -1372,7 +1366,7 @@ import { transform } from '@vue/compiler-core'
 
 
               var fontSizeFunc = (el, i, needFocus) => {
-                if (config.setting().config.lyricSet.animeFontSize == false) {
+                if (configContent.config.lyricSet.animeFontSize == false) {
 
                   return '1' //(i==lyricNum)?'1.05em':'1em'
                 };
@@ -1393,7 +1387,7 @@ import { transform } from '@vue/compiler-core'
               if (force == true && type != 'tran') {
                 dur = 0;
               } else {
-                dur = config.setting().config.lyricSet.dur
+                dur = configContent.config.lyricSet.dur
               }
               // let realdisplay = 0
               let nowTime = Date.now()
@@ -1409,13 +1403,13 @@ import { transform } from '@vue/compiler-core'
 
                 if (needFocus == true) {
                   let delay = (force == true)?'':config
-                    .settingTemperture.lyricSet.funcDelay[config.setting().config.lyricSet
+                    .settingTemperture.lyricSet.funcDelay[configContent.config.lyricSet
                       .funcDelay](i - lyricNum)
 
                   element.setAttribute('displaying',true)
                   element.style.setProperty('--delay',  delay + 'ms') 
 
-                  element.style.filter = config.settingTemperture.lyricSet.funcBlur[config.setting().config
+                  element.style.filter = config.settingTemperture.lyricSet.funcBlur[configContent.config
                     .lyricSet
                     .funcBlur](i, lyricNum)
                   // let colorData = this.data.player['musicCache'][this.id]['colorData']
@@ -1424,7 +1418,7 @@ import { transform } from '@vue/compiler-core'
                   color = (i == lyricNum) ? 'rgb(0,0,0,0.7)' : ('rgb(0,0,0,' + (0.25 * (0.65 ** Math.abs(i -
                     lyricNum))) + ')')
              
-                    element.style.setProperty('--animation-speed-line','cubic-bezier(.25,.1,.25, '+ ((config.setting().config.lyricSet
+                    element.style.setProperty('--animation-speed-line','cubic-bezier(.25,.1,.25, '+ ((configContent.config.lyricSet
                       .funcDelay==true)?(1+((i - lyricNum + 4)* 0.08)):1)+ ')')
                     
                   if (i == lyricNum) {
@@ -1478,7 +1472,7 @@ import { transform } from '@vue/compiler-core'
             console.error(error)
           }
           }
-        let configSettingData = config.setting()
+        let configSettingData = configContent
         //音频过度事件触发
         let transitionTime = (configSettingData.config.useTransitionNextMusic == true )?6:1
         if (((this.data.player.uiDisplay.duration - cur) <= transitionTime) && (progress != NaN) && (this.audio.readyState >=2) && (this
@@ -1709,9 +1703,9 @@ import { transform } from '@vue/compiler-core'
           this.data.player.tracks = data.tracks
           this.data.player.trackNum = data.num
           this.plays()
-          config.methods.editPlaylist((r) => {
-            return data
-          })
+          // config.methods.editPlaylist((r) => {
+          //   return data
+          // })
           document.getElementById('player').style.top = 'calc(100% - var(--minplayerHeight) - 18px)'
 
         }

diff --git a/src/components/background.vue b/src/components/background.vue
@@ -53,7 +53,7 @@
         props: {
             imgSrc: Object,
             mainDisplay: Object,
-            colorData: Object,
+            // colorData: Object,
             dynamic: Boolean
         },
         watch: {
@@ -75,7 +75,10 @@
 </script>
 
 <template>
-    <div  v-if="(mainDisplay != 'buttom')" :style="{background: (colorData)?colorData[0].color:null}"  v-bind:class="['player-background',(mainDisplay,config.setting().config.useAnimeBackground == true)?'dyn':'']">
+  <!-- :style="{background: (colorData)?colorData[0].color:null}"  -->
+    <div  v-if="(mainDisplay != 'buttom')" 
+
+     v-bind:class="['player-background',(mainDisplay,config.setting().config.useAnimeBackground == true)?'dyn':'']">
       <!-- {{ colorData }} -->
       <div v-for="n in 4" ref="block" :style="{
         backgroundImage: 'url(' + imgSrc + '?param=128y128'+')',

diff --git a/src/js/config.js b/src/js/config.js
@@ -23,10 +23,11 @@ var setting = {
     playList:{
         num: 0,
         tracks: []
-
     }
 }
 
+let cache = []
+
 var methods = {
     lunch() {
 
@@ -36,14 +37,17 @@ var methods = {
             this.refuseConfig()
         }
     },
-    getconfig(){
-        return (JSON.parse(localStorage.getItem("blurlyricConfig"))||(setting))
+    getconfig(cmd,func){
+        if(cmd = 'keepListenning'){
+            cache.push(func)
+        }
+        return (  JSON.parse(localStorage.getItem("blurlyricConfig")) || (setting))
     },
     async refuseConfig() {
         reTools.getData('/blurlyric/getUser', {
             id: cookies.get('blurlyricid')
         }).then(r => {
-            console.log(r);
+            // console.log(r);
             if (r.data.code != 400 && r.data.config.config.configVersion != setting.config.configVersion) {
                 this.createUser()
                 return
@@ -54,12 +58,13 @@ var methods = {
             }
 
             localStorage.setItem("blurlyricConfig", JSON.stringify(r.data.config));
-            if(r.data.config.playList.tracks.length>1){
-                app.changeTrack({
-                    num:r.data.config.playList.num,
-                    tracks:r.data.config.playList.tracks
-                })
-            }
+            setting.config = r.data.config.config
+            // if(r.data.config.playList.tracks.length>1){
+            //     app.changeTrack({
+            //         num:r.data.config.playList.num,
+            //         tracks:r.data.config.playList.tracks
+            //     })
+            // }
 
         })
     },
@@ -78,19 +83,22 @@ var methods = {
             res: (value == 'force')?(setting):this.getconfig().config,
             // playList: setting.playList
         })
-        reTools.postData('/blurlyric/writeUserPlaylist', {
-            id: cookies.get('blurlyricid'),
-            playList: setting.playList
-        },{
-            "Content-Type":"application/json"
-        })
+        // reTools.postData('/blurlyric/writeUserPlaylist', {
+        //     id: cookies.get('blurlyricid'),
+        //     playList: setting.playList
+        // },{
+        //     "Content-Type":"application/json"
+        // })
     },
     editconfig(func) {
         let nowsetting = this.getconfig()
         setting.config = func(nowsetting)
         localStorage.setItem("blurlyricConfig",JSON.stringify(setting))
-
-        this.pushingconfig()
+        for (let index = 0; index < cache.length; index++) {
+            const func = cache[index];
+            if( isFunction(func)) func(setting)
+        }
+        this.pushingconfig(setting.config)
     },
 
     editPlaylist(func) {
@@ -101,7 +109,9 @@ var methods = {
         this.pushingconfig()
     }
 }
-
+function isFunction(value) {
+    return Object.prototype.toString.call(value) === '[object Function]'
+}
 var settingTemperture = {
     lyricSet: {
         funcBlur: {

diff --git a/src/style.css b/src/style.css
@@ -136,13 +136,13 @@ body {
   background: hsla(0, 0%, 50.2%, .0)
 }
 
-.leftlab.watting + .rightrow,.leftlab.watting ,.leftlab.top + .rightrow,.leftlab.top {
-    filter: blur(1vmax);
+/* .leftlab.watting + .rightrow,.leftlab.watting ,.leftlab.top + .rightrow,.leftlab.top { */
+    /* filter: blur(1vmax); */
     /* transform: scale(1.2); */
     /* transform-origin: 50vw 50vh ; */
-  transition: all .4s !important
-
-}
+  /* transition: all .4s !important */
+/*  */
+/* } */
 
 .leftlab.icon {
   transition: width .2s cubic-bezier(.3, .45, .2, .95) .2s
@@ -1337,7 +1337,8 @@ div.left-side>div.linkbox>a {
   overflow: hidden;
   font-size: calc(1.3vh + .8vw);
   --dur: .6s;
-  height: inherit
+  height: inherit;
+  transition: font-size 0s
 }
 
 @media (max-width:460px) {
@@ -1359,7 +1360,9 @@ ul#lyrics {
   padding-left: 0;
   height: fit-content;
   min-height: 100%;
-  margin-top: var(--marginTop)
+  margin-top: var(--marginTop);
+  transition: font-size 0s
+
 }
 
 #lyric ul li {
@@ -1378,10 +1381,13 @@ ul#lyrics {
   transform: var(--transform) scale(.88);
   /* --animation-speed-line: cubic-bezier(.25,.1,.25,1); */
   /* --animation-speed-line:cubic-bezier(.3, .5, .2, 1); */
-  --dur: 850ms !important
+  --dur: 850ms !important;
+  transition: font-size 0s
+
+
 }
 #lyric ul li[displaying=true]{
-    transition: all  calc(var(--dur)  - var(--delay)) var(--animation-speed-line) calc(1.5 * var(--delay)),filter 300ms
+    transition: all  calc(var(--dur)  - var(--delay)) var(--animation-speed-line) calc(1.5 * var(--delay)),filter 300ms,font-size 0s
 }
 #lyric ul li[displaying=false]{
   transition: none !important;

diff --git a/util/config.json b/util/config.json
@@ -1,5 +1,5 @@
 {
-  "anonymous_token": "bf8bfeabb1aa84f9c8c3906c04a04fb864322804c83f5d607e91a04eae463c9436bd1a17ec353cf76a8c26687efe9d99cfaddd5dab1187dd993166e004087dd33897258e1e1276658f8f4972097b0273c7650225309047105822cbe94f856496807e650dd04abd3fb8130b7ae43fcc5b",
+  "anonymous_token": "bf8bfeabb1aa84f9c8c3906c04a04fb864322804c83f5d607e91a04eae463c9436bd1a17ec353cf7344af5b58ab959e1542bfa91abc6d6a5993166e004087dd3cad73f842c1dbd18106548e4e7c7cb12c7650225309047105822cbe94f856496807e650dd04abd3fb8130b7ae43fcc5b",
   "resourceTypeMap": {
     "0": "R_SO_4_",
     "1": "R_MV_5_",