PF01 Performance Monitoring

Test different dataset sizes and monitor performance

Large Dataset Demo
No data loaded yet.
Data Source: 🌍 Countries/States/Cities
Items: 0
Load Time: 0ms
Search Time: 0ms
Performance Controls
How many levels to expand initially (0=collapsed, 5=deep)
Nodes indexed per batch (for search)
Delay between index batches (higher = less blocking)
Single loop instead of recursive components - 12x faster
Render in batches (20→40→80...) for instant first paint
Disables custom sort callback for faster rendering
Metrics

Performance Impact

  • Expand Level: Higher = slower initial render
  • Batch Size: Smaller = smoother UI
  • Timeout: Higher = less blocking
  • Sorting: Complex sorts slow down rendering

Last Updated

Not yet

PF02 Optimization Techniques

Best practices for large datasets and smooth performance

Optimization Tips
🆕 Use $state.raw() (v4.6.0)
High Impact

Avoid Svelte's deep proxy overhead for large arrays (5000x faster!)

let data = $state.raw([...])
🆕 Flat Rendering (v4.6.0)
High Impact

Single loop rendering instead of recursive components (12x faster)

useFlatRendering={true}
🆕 Progressive Render (v4.6.0)
High Impact

Render in batches (20→40→80...) to prevent UI freeze

progressiveRender={true}
Limit Expand Level
High Impact

Keep expandLevel low (1-2) for large datasets

expandLevel={1}
Optimize Batch Size
Medium Impact

Smaller batches for better responsiveness

indexerBatchSize={10}
Debounce Search
Medium Impact

Add delay to search input to reduce queries

debounce(search, 300)
Implementation
v4.6.0 Performance Configuration 
 
 
Guidelines
 
🆕 v4.6.0 Performance Guidelines
 
  • Always use $state.raw() for data arrays with 1000+ items
    •  
  • Flat rendering is now default and 12x faster
    •  
  • Progressive render gives instant first paint
 
Dataset Size Recommendations
 
  • <100: All optimizations optional
    •  
  • 100-1000: Use $state.raw(), limit expand level
    •  
  • 1000-5000: All optimizations recommended
    •  
  • >5000: Consider pagination or lazy loading
 
Key v4.6.0 Settings
 
  • useFlatRendering={true} (default)
    •  
  • progressiveRender={true} (default)
    •  
  • initialBatchSize={20} for instant first paint
 
PF03 Performance Benchmarking
 
Measure and compare performance across different configurations
 
Benchmark Results
 
 
Expected Performance with v4.6.0 Flat Rendering
 
Dataset SizeFirst PaintFull RenderSearch Time
100 items< 5ms< 10ms< 1ms
500 items< 5ms< 30ms< 5ms
1000 items< 5ms< 50ms< 10ms
5000 items< 5ms< 150ms< 50ms
 🆕 v4.6.0: First paint is instant (~20 nodes), then progressive fill-in.
              Use $state.raw() for these results!
 
Benchmark Code
 
Benchmarking Code 
 
 
 
Analysis
 
Benchmark Categories
 
  • Data Generation: Time to create dataset
    •  
  • Initial Render: First paint time
    •  
  • Search Performance: Query execution time
    •  
  • Memory Usage: Heap size consumption
 
Performance Targets
 
  • Initial render: < 100ms
    •  
  • Search queries: < 50ms
    •  
  • Interactions: < 16ms (60 FPS)
    •  
  • Memory growth: Linear with data size
 
Browser Tools
 
Use browser DevTools Performance tab to profile real-world usage
            patterns.
 
Next Steps
 
📊
 
Data Structure
 
Optimize your data for better performance
 Data Guide
 
🔍
 
Search Optimization
 
Advanced search and filtering techniques
 Search Examples
 
📚
 
API Reference
 
Complete component documentation
 API Docs