前端渲染算法优化

public/css/style.css

@@ -154,6 +154,8 @@ body {
   z-index: 0;
   pointer-events: none;
   animation: glowFloat 20s ease-in-out infinite;
+  will-change: transform, opacity;
+  transform: translateZ(0);
 }
 
 .bg-glow-1 {
@@ -188,19 +190,19 @@ body {
 
   0%,
   100% {
-    transform: translate(0, 0) scale(1);
+    transform: translate3d(0, 0, 0) scale(1);
   }
 
   25% {
-    transform: translate(30px, -30px) scale(1.05);
+    transform: translate3d(30px, -30px, 0) scale(1.05);
   }
 
   50% {
-    transform: translate(-20px, 20px) scale(0.95);
+    transform: translate3d(-20px, 20px, 0) scale(0.95);
   }
 
   75% {
-    transform: translate(25px, 15px) scale(1.02);
+    transform: translate3d(25px, 15px, 0) scale(1.02);
   }
 }
 
@@ -222,8 +224,8 @@ body {
   justify-content: space-between;
   padding: 0 28px;
   background: rgba(10, 14, 26, 0.85);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
   border-bottom: 1px solid var(--border-color);
 }
 
@@ -278,6 +280,8 @@ body {
 
 .dot-pulse {
   animation: pulse 2s ease-in-out infinite;
+  will-change: opacity, box-shadow;
+  transform: translateZ(0);
 }
 
 @keyframes pulse {
@@ -451,7 +455,9 @@ input:checked+.slider:before {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transform: translateZ(0);
   transition: all 0.3s ease;
   overflow: hidden;
 }
@@ -618,7 +624,9 @@ input:checked+.slider:before {
   background: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-lg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transform: translateZ(0);
   overflow: hidden;
   transition: all 0.3s ease;
 }

public/js/app.js

@@ -511,12 +511,12 @@
                 coordinateSystem: 'geo',
                 geoIndex: 0,
                 showEffectOn: 'render',
-                rippleEffect: { brushType: 'stroke', scale: 4, period: 4 },
-                symbolSize: 6,
+                rippleEffect: { brushType: 'stroke', scale: 3, period: 6 },
+                symbolSize: 5,
                 itemStyle: {
                     color: '#06b6d4',
-                    shadowBlur: 10,
-                    shadowColor: '#06b6d4'
+                    shadowBlur: 3,
+                    shadowColor: 'rgba(6, 182, 212, 0.5)'
                 },
                 data: []
             }]

public/js/chart.js

@@ -234,7 +234,7 @@ class AreaChart {
   drawArea(ctx, values, getX, getY, chartH, p, fillColorTop, fillColorBottom, strokeColor, len) {
     if (!values || values.length === 0) return;
 
-    const useSimple = len > 500;
+    const useSimple = len > 250;
 
     // Fill
     ctx.beginPath();
@@ -469,16 +469,20 @@ class MetricChart {
         });
 
     } else {
-        // Draw Single Line Path
+        const useSimple = len > 250;
         ctx.beginPath();
         ctx.moveTo(getX(0), getY(values[0]));
         for (let i = 1; i < len; i++) {
-            const prevX = getX(i - 1);
-            const currX = getX(i);
-            const prevY = getY(values[i - 1]);
-            const currY = getY(values[i]);
-            const midX = (prevX + currX) / 2;
-            ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+            if (useSimple) {
+                ctx.lineTo(getX(i), getY(values[i]));
+            } else {
+                const prevX = getX(i - 1);
+                const currX = getX(i);
+                const prevY = getY(values[i - 1]);
+                const currY = getY(values[i]);
+                const midX = (prevX + currX) / 2;
+                ctx.bezierCurveTo(midX, prevY, midX, currY, currX, currY);
+            }
         }
         
         // Stroke