Configuration
Optimize Taffy for your specific use case.
Taffy works out-of-the-box, but you can tune it for performance, precision, or resource constraints.
Capacity Pre-allocation
If you know roughly how many nodes you'll need, initializing the tree with a capacity can reduce memory re-allocations and improve startup performance.
Rounding Settings
Control whether layout values are snapped to whole integers (pixels) or kept as precise floats.
| Setting | Function | Description |
|---|---|---|
| Enable Rounding | tree.enableRounding() | Default. Rounds values to nearest pixel. Prevents blurry borders in UI. |
| Disable Rounding | tree.disableRounding() | Uses high-precision floats. Best for vector graphics or zoomable UIs. |
Memory Management
Although Taffy's JavaScript bindings use FinalizationRegistry to automatically clean up WASM memory when TaffyTree objects are garbage collected, relying solely on the GC can be insufficient for high-performance applications (like game loops) where trees are created frequently.
To prevent memory spikes or leaks in the WASM heap, you should explicitly manage memory:
- Reuse (Recommended): Use
.clear()to reset a tree without deallocating its memory. This is ideal for game loops or recursive layouts, as it avoids constant allocation overhead. - Dispose: Use
.free()if you are completely done with a tree and want to release its memory immediately.
const tree = new TaffyTree(); // ... use tree ... // Option 1: Reuse the tree (Recommended) // Clears all nodes but keeps memory allocated tree.clear(); // Option 2: Free completely tree.free();
Next Steps
- 🎨 Styling Guide - Learn about Flexbox and Grid.
- 🛠️ Advanced Topics - Debugging and Internals.