Skip to content

robobun/yoga-layout-benchmark

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

Performance benchmark comparing Bun.Yoga native implementation vs WebAssembly yoga-layout

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •