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)
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
Limit Expand Level
High Impact

Keep expandLevel low (1-2) for large datasets

expand-level="1"
Set Data via JS Property
High Impact

Always assign large data arrays via JavaScript, not HTML attributes

treeEl.data = largeDataset;
Use Sort Callback Wisely
Medium Impact

Complex sort callbacks slow down rendering with large datasets

treeEl.sortCallback = simpleSortFn;
Optimize Batch Size
Medium Impact

Smaller batches for better responsiveness

indexer-batch-size="10"
Debounce Search
Medium Impact

Add delay to search input to reduce queries

debounce(search, 300)
Implementation
Performance Configuration 
 
 
Guidelines
 
Performance Guidelines
 
  • Always set data via JS for arrays with 100+ items
    •  
  • Limit expand level to 1-2 for large datasets
    •  
  • Use simple sort callbacks or skip sorting entirely
 
Dataset Size Recommendations
 
  • <100: All optimizations optional
    •  
  • 100-1000: Limit expand level
    •  
  • 1000-5000: All optimizations recommended
    •  
  • >5000: Consider pagination or lazy loading
 
Key Settings
 
  • expand-level="1" for fast initial render
    •  
  • indexer-batch-size="10" for smooth UI
    •  
  • should-use-internal-search-index="true" for fast search
 
PF03 Performance Benchmarking
 
Measure and compare performance across different configurations
 
Benchmark Results
 
 
Expected Performance
 
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
 Set data via JavaScript property for best performance.
 
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