Performance & Batching

StringTune is deeply optimized for rendering smooth 60fps animations. The most critical architectural feature it uses is DOM Batching (separating layout reads from style writes).

The Layout Thrashing Problem

In browser rendering, if JavaScript reads a layout property (like getBoundingClientRect()) and then immediately writes a style (like transform), the browser is forced to synchronously recalculate the layout. Doing this multiple times per frame causes "layout thrashing" and drastically drops the frame rate.

How StringTune Solves It

StringTune groups all computations across the entire page into strict phases per frame. It exposes frameDOM and styleTxn to ensure modules respect these boundaries.

frameDOM.measure() and frameDOM.mutate()

When building custom modules, you must use the frameDOM helper instead of naked DOM API calls:

import { frameDOM } from '@fiddle-digital/string-tune';

// 1. Queue a read operation
frameDOM.measure(() => {
  const rect = element.getBoundingClientRect();
  
  // 2. Queue a write operation based on the read
  frameDOM.mutate(() => {
    element.style.transform = `translateY(${rect.top * 0.5}px)`;
  });
});

Global Configuration

Batching is strictly enforced by default. You can control these features globally, though it's rarely necessary to disable them.

const stringTune = StringTune.getInstance();

// Toggle the internal batcher queue
stringTune.domBatcherEnabled = true;

// Toggle the IntersectionObserver that efficiently puts off-screen elements to sleep
stringTune.intersectionObserverEnabled = true;