Skip to content

PERFORMANCE_MODE.md

Latest commit

 

History

History
234 lines (171 loc) · 6.1 KB

PERFORMANCE_MODE.md

File metadata and controls

234 lines (171 loc) · 6.1 KB

Performance Mode Implementation

Overview

Performance mode optimizes the DjedOPS dashboard for low-end devices and battery conservation by reducing animation complexity and visual effects.

Implementation Details

1. State Management (lib/store.ts)

Added highPerformanceMode boolean state with localStorage persistence:

// State
highPerformanceMode: boolean;

// Action
setHighPerformanceMode: (enabled: boolean) => void;

// Initial value loaded from localStorage
highPerformanceMode: localStorage.getItem('perfMode') === 'true'

2. UI Component (components/PerformanceToggle.tsx)

Toggle button with visual states:

  • Performance Mode: ⚡ Green theme, reduced animations
  • Visual Mode: ✨ Purple theme, full quality

Features:

  • Framer Motion hover/tap animations
  • Glow effects matching mode
  • Accessible tooltips
  • Lucide React icons

3. ReserveSun Optimizations (components/isolated/ReserveSun.tsx)

Performance Mode Changes:

Feature Visual Mode Performance Mode Reduction
Outer Rings 4 rings 2 rings 50%
Grid Lines 8 lines 4 lines 50%
Rotation Speed 20-30s 40-60s 2x slower
Glow Effects Full box-shadow Disabled 100%
Pulse Animations Full scale Reduced scale ~50%
Distortion 0.15 0.08 ~47%

CSS Optimizations:

// Box-shadow disabled in performance mode
boxShadow: highPerformanceMode ? 'none' : `0 0 ${glowIntensity}px ${color}`

// Animations disabled in performance mode
animate={!shouldPause && visualState !== 'SAFE' && !highPerformanceMode ? {...} : {}}

// Reduced ring count
const ringCount = highPerformanceMode ? 2 : 4;

Performance Impact

Before (Visual Mode):

  • 4 outer rings with continuous pulse animations
  • 8×8 grid lines (64 DOM elements)
  • Multiple box-shadow layers (GPU-intensive)
  • Fast rotation speeds (20-30s)
  • Complex distortion calculations

After (Performance Mode):

  • 2 outer rings with no pulse animations
  • 4×4 grid lines (16 DOM elements) - 75% reduction
  • No box-shadow rendering
  • Slower rotation speeds (40-60s) - 2x less frequent repaints
  • Simplified distortion calculations

Expected Results:

  • Frame Rate: 60fps → stable 60fps on low-end devices
  • GPU Usage: ~50% reduction (no box-shadow compositing)
  • DOM Complexity: ~70% fewer animated elements
  • Battery Life: ~30% improvement on mobile devices

Usage

User Interface

The performance toggle appears in the header next to the wallet connection:

<PerformanceToggle />

Clicking toggles between modes with immediate visual feedback.

Programmatic Access

import { useAppStore } from '@/lib/store';

const { highPerformanceMode, setHighPerformanceMode } = useAppStore();

// Enable performance mode
setHighPerformanceMode(true);

// Disable performance mode
setHighPerformanceMode(false);

Persistence

User preference is automatically saved to localStorage:

  • Key: 'perfMode'
  • Value: 'true' or 'false'
  • Loaded on app initialization

Future Enhancements

Three.js Integration

The infrastructure is ready for Three.js upgrade:

// Performance Mode (Low-Quality)
if (highPerformanceMode) {
  // Reduce geometry detail
  sunGeometry = new THREE.SphereGeometry(1, 16, 16); // was 64, 64
  
  // Disable expensive features
  scene.fog = null;
  renderer.shadowMap.enabled = false;
  
  // Reduce frame rate
  renderingInterval = 2; // Skip every 2nd frame
}

// Visual Mode (High-Quality)
else {
  sunGeometry = new THREE.SphereGeometry(1, 64, 64);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
}

Additional Optimizations

Potential future improvements:

  1. Auto-detection: Detect device capabilities and suggest mode
  2. Battery API: Automatically switch modes on low battery
  3. Network Quality: Reduce animations on slow connections
  4. FPS Monitoring: Dynamic quality adjustment based on frame rate
  5. Mobile-specific: Force performance mode on mobile by default

Testing

Manual Testing

  1. Open the dashboard
  2. Click the performance toggle in the header
  3. Observe ReserveSun component changes:
    • Ring count reduction
    • Grid simplification
    • Glow effect removal
    • Slower rotation
  4. Check localStorage: localStorage.getItem('perfMode')
  5. Refresh page - preference should persist

Browser DevTools

Monitor performance impact:

  1. Open Chrome DevTools → Performance tab
  2. Record 10 seconds in Visual Mode
  3. Toggle to Performance Mode
  4. Record 10 seconds in Performance Mode
  5. Compare:
    • Scripting time
    • Rendering time
    • Painting time
    • GPU memory usage

Mobile Testing

Test on low-end devices:

  • Enable Performance Mode
  • Monitor frame rate (Chrome: chrome://gpu)
  • Check battery drain rate
  • Verify smooth scroll performance

Implementation Time

  • Store setup: 15 minutes
  • PerformanceToggle component: 30 minutes
  • ReserveSun optimizations: 45 minutes
  • Testing & documentation: 30 minutes
  • Total: ~2 hours

Related Files

  • lib/store.ts - State management
  • components/PerformanceToggle.tsx - UI toggle
  • components/isolated/ReserveSun.tsx - Optimized visualization
  • app/page.tsx - Integration point
  • PERFORMANCE_MODE.md - This documentation

Browser Compatibility

Performance mode features are supported in:

  • Chrome/Edge 90+
  • Firefox 88+
  • Safari 14+
  • Mobile browsers (all major)

LocalStorage is universally supported.

Accessibility

The performance toggle:

  • Has descriptive title attribute
  • Uses semantic <button> element
  • Provides visual feedback (scale, color)
  • Persists user preference
  • Works with keyboard navigation

Migration Path

Current implementation is CSS-based. When upgrading to Three.js:

  1. Keep existing infrastructure (store, toggle, localStorage)
  2. Replace ReserveSun CSS with Three.js Canvas
  3. Apply geometry/material optimizations
  4. Maintain same performance mode API
  5. No breaking changes to parent components

The performance mode system is framework-agnostic and will work seamlessly with Three.js.