Yoga Layout Engine Performance Benchmark

A comprehensive performance comparison between Bun's native Yoga implementation (Bun.Yoga) and the WebAssembly implementation (yoga-layout-prebuilt).

Overview

This benchmark compares the performance of two Yoga layout engine implementations:

1. Bun.Yoga - Native implementation integrated into Bun runtime
2. 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.

Test Scenarios

1. Simple Flexbox Layout

• Description: Basic flex container with 10 children
• Node Count: 11 nodes
• Use Case: Simple horizontal layouts, navigation bars

2. Nested Flexbox Grid

• Description: Grid layout with 100 items arranged in 10x10
• Node Count: 111 nodes
• Use Case: Card grids, image galleries, dashboard layouts

3. Deep Nested Layout

• Description: Deeply nested structure (depth 20)
• Node Count: 21 nodes
• Use Case: Component hierarchies, complex UI structures

4. Complex App Layout

• Description: Realistic app layout with header, sidebar, content, footer
• Node Count: 50 nodes
• Use Case: Full application layouts, admin dashboards

Benchmark Results

Note: Results will vary based on hardware, system load, and JavaScript engine optimizations.

Environment

• Platform: Linux aarch64
• CPU: 80 cores
• Memory: 251GB
• Node.js: v24.3.0
• Bun: v1.2.22-canary.1+24b1a87f1 (with native Yoga support)

Performance Results

Node.js + yoga-layout-prebuilt (WebAssembly)

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

Bun + Bun.Yoga (Native Implementation)

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

Bun + yoga-layout-prebuilt (WebAssembly - for comparison)

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

Performance Comparison Summary

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

Key Findings

🚀 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

Detailed Statistics

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

Usage

Prerequisites

• Node.js: >= 18.0.0
• Bun: Latest version with Yoga support (>=1.2.22)

Installation

git clone <repository-url>
cd yoga-benchmark-repo
npm install

Running Benchmarks

# 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

Benchmark Parameters

• Iterations: 100 per scenario (configurable)
• Warmup: 10 iterations before measurement
• Memory Management: Automatic cleanup between iterations

Implementation Details

Layout Creation

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);
}

Performance Measurement

const start = performance.now();
root.calculateLayout(800, 600, YogaAPI.DIRECTION_LTR);
const end = performance.now();
const duration = end - start;

Expected Performance Characteristics

Bun.Yoga Advantages

• 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

WebAssembly Implementation

• Portability: Runs in any JavaScript environment
• Consistency: Same performance across different runtimes
• Compatibility: Works with existing Node.js ecosystems

Development

Adding New Scenarios

{
  name: "My Custom Layout",
  description: "Description of the layout",
  nodeCount: 42, // Approximate node count
  createLayout: (YogaAPI) => {
    // Return configured root node
    return rootNode;
  }
}

Modifying Parameters

Edit the benchmark parameters in benchmark.js:

const iterations = 100; // Number of iterations
const warmupIterations = 10; // Warmup runs

Technical Notes

Memory Management

• WASM implementation may run out of memory with high iteration counts
• Native implementation handles memory more efficiently
• Consider reducing iterations if encountering memory errors

Measurement Accuracy

• Uses performance.now() for high-resolution timing
• Includes warmup iterations to account for JIT optimization
• Reports multiple statistical measures for comprehensive analysis

Contributing

1. Fork the repository
2. Add new test scenarios or improvements
3. Run benchmarks on different platforms
4. Submit pull requests with results

License

MIT License - See LICENSE file for details

Versions

• 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.