A comprehensive performance comparison between Bun's native Yoga implementation (Bun.Yoga
) and the WebAssembly implementation (yoga-layout-prebuilt
).
This benchmark compares the performance of two Yoga layout engine implementations:
- Bun.Yoga - Native implementation integrated into Bun runtime
- yoga-layout-prebuilt - WebAssembly/JavaScript implementation for Node.js
The benchmark tests various layout scenarios from simple flexbox layouts to complex nested structures, measuring layout calculation performance across different complexity levels.
- Description: Basic flex container with 10 children
- Node Count: 11 nodes
- Use Case: Simple horizontal layouts, navigation bars
- Description: Grid layout with 100 items arranged in 10x10
- Node Count: 111 nodes
- Use Case: Card grids, image galleries, dashboard layouts
- Description: Deeply nested structure (depth 20)
- Node Count: 21 nodes
- Use Case: Component hierarchies, complex UI structures
- Description: Realistic app layout with header, sidebar, content, footer
- Node Count: 50 nodes
- Use Case: Full application layouts, admin dashboards
Note: Results will vary based on hardware, system load, and JavaScript engine optimizations.
- Platform: Linux aarch64
- CPU: 80 cores
- Memory: 251GB
- Node.js: v24.3.0
- Bun: v1.2.22-canary.1+24b1a87f1 (with native Yoga support)
Scenario | Average | Median | Min | Max | P95 | P99 |
---|---|---|---|---|---|---|
Simple Flexbox (11 nodes) | 0.042ms | 0.040ms | 0.038ms | 0.072ms | 0.058ms | 0.072ms |
Nested Grid (111 nodes) | 0.845ms | 0.838ms | 0.825ms | 0.987ms | 0.907ms | 0.987ms |
Deep Nested (21 nodes) | 0.125ms | 0.123ms | 0.122ms | 0.149ms | 0.141ms | 0.149ms |
Complex App (50 nodes) | 0.481ms | 0.479ms | 0.472ms | 0.536ms | 0.496ms | 0.536ms |
Scenario | Average | Median | Min | Max | P95 | P99 |
---|---|---|---|---|---|---|
Simple Flexbox (11 nodes) | 0.012ms | 0.011ms | 0.011ms | 0.036ms | 0.014ms | 0.036ms |
Nested Grid (111 nodes) | 0.244ms | 0.240ms | 0.238ms | 0.266ms | 0.262ms | 0.266ms |
Deep Nested (21 nodes) | 0.046ms | 0.045ms | 0.044ms | 0.066ms | 0.054ms | 0.066ms |
Complex App (50 nodes) | 0.145ms | 0.143ms | 0.141ms | 0.172ms | 0.166ms | 0.172ms |
Scenario | Average | Median | Min | Max | P95 | P99 |
---|---|---|---|---|---|---|
Simple Flexbox (11 nodes) | 0.190ms | 0.174ms | 0.144ms | 0.375ms | 0.296ms | 0.375ms |
Nested Grid (111 nodes) | 1.091ms | 0.841ms | 0.793ms | 1.968ms | 1.913ms | 1.968ms |
Deep Nested (21 nodes) | 0.362ms | 0.362ms | 0.335ms | 0.494ms | 0.394ms | 0.494ms |
Complex App (50 nodes) | 0.585ms | 0.512ms | 0.492ms | 1.222ms | 1.201ms | 1.222ms |
Scenario | Bun.Yoga (Native) | WebAssembly | Speedup | Performance Gain |
---|---|---|---|---|
Simple Flexbox Layout | 0.012ms | 0.190ms | 15.76x faster | 1,476% improvement |
Nested Flexbox Grid | 0.244ms | 1.091ms | 4.48x faster | 348% improvement |
Deep Nested Layout | 0.046ms | 0.362ms | 7.92x faster | 692% improvement |
Complex App Layout | 0.145ms | 0.585ms | 4.04x faster | 304% improvement |
🚀 Bun.Yoga delivers exceptional performance improvements:
- Up to 15.76x faster for simple layouts
- Consistent 4-8x speedup across all scenarios
- Sub-millisecond performance for most common layouts
- Dramatic improvement in P95/P99 latency characteristics
Each test measures:
- Average: Mean execution time
- Median: Middle value (50th percentile)
- Min/Max: Fastest and slowest executions
- P95/P99: 95th and 99th percentile times
- Node.js: >= 18.0.0
- Bun: Latest version with Yoga support (>=1.2.22)
git clone <repository-url>
cd yoga-benchmark-repo
npm install
# Run with Node.js (WebAssembly implementation only)
npm run benchmark
# Run with Bun (includes native Bun.Yoga comparison)
npm run benchmark:bun
# Or directly:
node benchmark.js
bun benchmark.js
- Iterations: 100 per scenario (configurable)
- Warmup: 10 iterations before measurement
- Memory Management: Automatic cleanup between iterations
Each scenario creates a realistic layout structure:
// Example: Simple Flexbox Layout
const root = YogaAPI.Node.create();
root.setFlexDirection(YogaAPI.FLEX_DIRECTION_ROW);
root.setWidth(800);
root.setHeight(600);
for (let i = 0; i < 10; i++) {
const child = YogaAPI.Node.create();
child.setFlexGrow(1);
child.setHeight(50);
child.setMargin(YogaAPI.EDGE_ALL, 5);
root.insertChild(child, i);
}
const start = performance.now();
root.calculateLayout(800, 600, YogaAPI.DIRECTION_LTR);
const end = performance.now();
const duration = end - start;
- Native Speed: Direct C++ implementation without WASM overhead
- Memory Efficiency: Better memory management and garbage collection integration
- JIT Optimization: Better integration with V8/JavaScriptCore optimizations
- Portability: Runs in any JavaScript environment
- Consistency: Same performance across different runtimes
- Compatibility: Works with existing Node.js ecosystems
{
name: "My Custom Layout",
description: "Description of the layout",
nodeCount: 42, // Approximate node count
createLayout: (YogaAPI) => {
// Return configured root node
return rootNode;
}
}
Edit the benchmark parameters in benchmark.js
:
const iterations = 100; // Number of iterations
const warmupIterations = 10; // Warmup runs
- WASM implementation may run out of memory with high iteration counts
- Native implementation handles memory more efficiently
- Consider reducing iterations if encountering memory errors
- Uses
performance.now()
for high-resolution timing - Includes warmup iterations to account for JIT optimization
- Reports multiple statistical measures for comprehensive analysis
- Fork the repository
- Add new test scenarios or improvements
- Run benchmarks on different platforms
- Submit pull requests with results
MIT License - See LICENSE file for details
- Bun: v1.2.22-canary.1+24b1a87f1 (jarred/yogaa branch)
- yoga-layout-prebuilt: v1.10.0
- Node.js: v24.3.0+
This benchmark is designed to provide objective performance comparisons. Results may vary based on hardware, system configuration, and JavaScript engine versions.