feat: Optimize performance with dirty flag

app.js

@@ -57,6 +57,8 @@ function App() {
     this.loop = 0;      // 接收requestAnimationFrame的返回
     this.dt = 50;       // 每次分析的时间间隔 单位毫秒 在this.Analyser.analyse中更新
     this.time = -1;     // 当前时间 单位：毫秒 在this.AudioPlayer.update中更新
+    this.dirty = true;  // 是否需要重绘 四个地方需要置位: resize 用户操作(鼠标键盘) 分析完成(Spectrogram setter CQT结束) 播放时(AudioPlayer.update)
+    const makeDirty = () => { this.dirty = true; };   // 推迟可以解决大部分问题
     /**
      * 设置播放时间 如果立即播放(keep==false)则有优化
      * @param {Number} t 时间点 单位：毫秒
@@ -159,6 +161,7 @@ function App() {
                 this.parent.xnum = s.length;    // 触发HscrollBar.refreshSize
                 this.parent.scroll2();          // 保持位置不变 本来是为了“一边分析一边绘制频谱”而设计的，虽然减少了等待但容易崩而且卡
             }
+            makeDirty();
         },
         get Alpha() {
             return parseInt(this.mask.substring(7), 16);
@@ -689,6 +692,7 @@ function App() {
             if (A.autoPage && (this.time > this.idXend * this.dt || this.time < this.idXstart * this.dt)) {
                 this.scroll2(((this.time / this.dt - 1) | 0) * this._width, this.scrollY);  // 留一点空位
             }
+            makeDirty();    // 音频播放强制重绘
         },
         /**
          * 在指定的毫秒数开始播放
@@ -1288,6 +1292,7 @@ function App() {
         // 更新滑动条大小
         this.width = this._width;   // 除了触发滑动条更新，还能在初始化的时候保证timeBar的文字间隔
         this.scroll2();
+        makeDirty();
     };
     /**
      * 移动到 scroll to (x, y)
@@ -1327,12 +1332,14 @@ function App() {
         // 首先要同步时间 如果音频播放了，就同步音频时间
         this.AudioPlayer.update();
         this.MidiPlayer.update();
+        if (!this.dirty) return;
         this.Spectrogram.update();
         this.BeatBar.update();
         this.Keyboard.update();
         this.MidiAction.update();
         this.TimeBar.update();  // 必须在Spectrogram后更新，因为涉及时间指示的绘制
         this.pitchNameDisplay.update();
+        this.dirty = false;
     };
     this.trackMouseY = (e) => { // onmousemove
         this.mouseY = e.offsetY;
@@ -1632,6 +1639,7 @@ function App() {
                     }
                 }
                 console.timeEnd("CQT计算");
+                makeDirty();
             }).catch(console.error);
         },
         /**
@@ -1938,6 +1946,12 @@ function App() {
         } this.Keyboard.mousedown();
     });
     this.loopUpdate(true);
+    // 用户鼠标操作触发刷新
+    document.addEventListener('mousemove', makeDirty);
+    document.addEventListener('mousedown', makeDirty);
+    document.addEventListener('mouseup', makeDirty);
+    document.addEventListener('keydown', makeDirty);
+    document.addEventListener('wheel', makeDirty);
 }
 /*
 需要什么dom?
@@ -1953,4 +1967,4 @@ function App() {
 #actMode div 动作模式选择，其下有两个btn
 #scrollbar-track div 滑动条轨道
 #scrollbar-thumb div 滑动条
-*/
+*/