perf: optimized spectrogram rendering pipeline

Author: bclswl0827

CHANGELOG.md

@@ -2,6 +2,25 @@
 
 Starting from v2.2.5, all notable changes to this project will be documented in this file.
 
+## v4.3.3
+
+### Release Notes
+
+This is a **minor performance and stability release** focused on **UI responsiveness** and **upgrade robustness**.
+
+The main highlight is **spectrogram rendering optimization**, significantly improving smoothness and reducing frame drops during real-time visualization. In addition, several **upgrade and startup edge cases** have been tightened to avoid misleading states and permission-related failures.
+
+### Improvements
+
+- Optimized **spectrogram rendering pipeline**, improving **frame rate and interaction smoothness** during real-time display.
+- Reduced unnecessary redraws in the frontend, lowering CPU usage under continuous data streams.
+
+### Bug Fixes
+
+- Fixed **upgrade status priority logic**, ensuring correct status reporting when multiple upgrade conditions overlap.
+- Added **write permission checks before startup** to prevent silent failures during initialization.
+- Explicitly specified **HTTPS scheme in CSP sources**, avoiding mixed-content and policy resolution issues in some browsers.
+
 ## v4.3.2
 
 ### Release Notes

Makefile

@@ -1,6 +1,6 @@
 CURRENT_VERSION_MAJOR = 4
 CURRENT_VERSION_MINOR = 3
-CURRENT_VERSION_PATCH = 2
+CURRENT_VERSION_PATCH = 3
 
 REQUIRED_VERSION_MAJOR = 4
 REQUIRED_VERSION_MINOR = 3

web/src/src/components/chart/DequeSpectrogram.tsx

@@ -121,19 +121,30 @@ export const DequeSpectrogram = memo(
 
             const timeRangeRef = useRef<[number, number]>([0, 0.001]);
             useEffect(() => {
-                const renderLoop = setInterval(() => {
+                let rafId: number;
+                let lastRenderTime = 0;
+                const frameInterval = 1000 / renderFPS;
+                const renderLoop = (now: number) => {
+                    rafId = requestAnimationFrame(renderLoop);
+
+                    if (now - lastRenderTime < frameInterval) {
+                        return;
+                    }
+                    lastRenderTime = now;
+
                     const canvas = canvasRef.current;
-                    if (!canvas || !spectrogramRef.current || !initialized) {
+                    const sp = spectrogramRef.current;
+                    if (!canvas || !sp || !initialized) {
                         return;
                     }
                     if (needsUpdateRef.current) {
                         needsUpdateRef.current = false;
                         const bufData = bufferRef.current
                             .getData()
                             .filter((v): v is [number, number] => v[1] !== null);
-                        spectrogramRef.current.setData(bufData);
+                        sp.setData(bufData);
                         if (bufData.length > 0) {
-                            const end = spectrogramRef.current.getDuration();
+                            const end = sp.getDuration();
                             timeRangeRef.current = [end - duration, end];
                         }
                     }
@@ -142,16 +153,17 @@ export const DequeSpectrogram = memo(
                     if (!width || !height) {
                         return;
                     }
-                    spectrogramRef.current.render({
+                    sp.render({
                         timeRange: timeRangeRef.current,
                         canvas,
                         width,
                         height,
                         freqRange
                     });
-                }, 1000 / renderFPS);
-                return () => clearInterval(renderLoop);
-            }, [duration, freqRange, initialized, renderFPS, spectrogramRef]);
+                };
+                rafId = requestAnimationFrame(renderLoop);
+                return () => cancelAnimationFrame(rafId);
+            }, [duration, freqRange, initialized, renderFPS]);
 
             const handlePreviewMinDB = useCallback((value: number) => {
                 setMinDBState(value);

web/src/src/components/chart/Spectrogram.tsx

@@ -81,7 +81,7 @@ export const Spectrogram = memo(
             return () => ro.disconnect();
         }, []);
 
-        const [timePercent, setTimePercent] = useState(0);
+        const [timePercent, setTimePercent] = useState(0.5);
         const dataDuration = useMemo<number | null>(() => {
             if (data.length === 0) {
                 return null;
@@ -94,7 +94,16 @@ export const Spectrogram = memo(
                 return;
             }
 
-            const id = setInterval(() => {
+            let rafId: number;
+            let lastRenderTime = 0;
+            const frameInterval = 1000 / renderFPS;
+
+            const renderLoop = (now: number) => {
+                rafId = requestAnimationFrame(renderLoop);
+                if (now - lastRenderTime < frameInterval) {
+                    return;
+                }
+                lastRenderTime = now;
                 const canvas = canvasRef.current;
                 const sp = spectrogramRef.current;
                 if (!canvas || !sp) {
@@ -118,10 +127,10 @@ export const Spectrogram = memo(
                     timeRange: [start, end],
                     freqRange
                 });
-            }, 1000 / renderFPS);
-
-            return () => clearInterval(id);
-        }, [data, dataDuration, duration, freqRange, initialized, renderFPS, timePercent]);
+            };
+            rafId = requestAnimationFrame(renderLoop);
+            return () => cancelAnimationFrame(rafId);
+        }, [dataDuration, duration, freqRange, initialized, renderFPS, timePercent]);
 
         useEffect(() => {
             if (initialized) {

web/src/src/views/History/index.tsx

@@ -392,7 +392,7 @@ const History = ({ currentLocale }: IRouterComponent) => {
 
     const getInitialLayout = useCallback(
         (id: string, index: number) => {
-            if (config[id]?.position && config[id]?.size) {
+            if (config[id]?.position && config[id]?.size && config[id]?.spectrogram) {
                 return config[id];
             }