Inspector performance monitoring

[wouterlucas]

The Inspector now includes configurable performance monitoring for setter calls, which helps identify potential performance bottlenecks

Performance monitoring settings are part of the RendererMainSettings and can be configured via the inspectorOptions property:

import { RendererMain, Inspector } from '@lightningjs/renderer';

const renderer = new RendererMain({
  appWidth: 1920,
  appHeight: 1080,
  inspector: Inspector, // Enable inspector
  inspectorOptions: {
    enablePerformanceMonitoring: true,  // Enable/disable setter performance monitoring (default: true)
    excessiveCallThreshold: 50,         // Warning threshold for setter calls (default: 100)
    resetInterval: 3000,                // Reset interval in milliseconds (default: 5000)
    enableAnimationMonitoring: true,    // Enable/disable animation monitoring (default: true)
    maxAnimationHistory: 500,           // Maximum animations to keep in history (default: 1000)
    animationStatsInterval: 15,         // Print animation stats every 15 seconds (default: 0 - disabled)
  }
}, 'app');

Settings

Setter Performance Monitoring

enablePerformanceMonitoring

• Type: boolean
• Default: true
• Description: Enable or disable performance monitoring for setter calls

excessiveCallThreshold

• Type: number
• Default: 100
• Description: The number of setter calls within the reset interval that triggers a performance warning

resetInterval

• Type: number
• Default: 5000 (5 seconds)
• Description: Time interval in milliseconds after which setter call counters are reset

Animation Monitoring

enableAnimationMonitoring

• Type: boolean
• Default: true
• Description: Enable or disable animation monitoring and statistics tracking

maxAnimationHistory

• Type: number
• Default: 1000
• Description: Maximum number of completed animations to keep in history for analysis

animationStatsInterval

• Type: number
• Default: 0 (disabled)
• Description: Automatically print animation statistics to console every X seconds (0 to disable)

Animation monitor Output

When enabled, you'll see output like this every X seconds:

🎬 Animation Stats: 3 active, 42 completed, 850ms avg duration

Warning Output

When the threshold is exceeded, you'll see console warnings like:

🚨 Inspector Performance Warning: Setter 'x' called 75 times in 2000ms on node 123
🚨 Inspector Performance Warning: Setter 'x' called 125 times in 2000ms on node 123 (continuing...)

This helps identify nodes and properties that might benefit from optimization, such as reducing animation frequency.