Advantage Scroll Performance

Problem

Advantage's onScrollProgress fires on every scroll frame. If creative code does DOM lookups inside the callback, it runs querySelector 60x/sec unnecessarily. Heavy callbacks can contribute to creatives being flagged/removed for excessive resource usage.

Key Insight

The cost is in event frequency and DOM work per frame, not in scroll value precision. Rounding decimals doesn't help -- the postMessage fires regardless.

Creative-Side Optimization

Cache DOM elements outside the scroll callback:

// Bad: querySelector on every frame
ADVANTAGE.onScrollProgress((progress) => {
  const el = document.querySelector('.main_container_scroll')  // 60x/sec
  el.style.transform = `translateY(${-progress * 100}%)`
})

// Good: cache once
const el = document.querySelector('.main_container_scroll')
ADVANTAGE.onScrollProgress((progress) => {
  el.style.transform = `translateY(${-progress * 100}%)`
})

For non-visual logic (video play/pause, analytics), deduplicate with a last-value check:

let lastAction = null
ADVANTAGE.onScrollProgress((progress) => {
  el.style.transform = `translateY(${-progress * 100}%)`

  const action = Math.round(progress * 100) < 80 ? 'play' : 'pause'
  if (action === lastAction) return
  lastAction = action
  // ...video control
})

Potential Engine-Side Improvements

1. Threshold callbacks -- onScrollThreshold(0.8, callback) instead of creatives checking percentage every frame. Reduces creative-side complexity.

2. Built-in element binding -- ADVANTAGE.bindScrollTransform(element, transformFn) so the engine handles the animation loop directly, no creative callback needed for simple transforms.

These are engine features, not quick fixes. Every creative uses scroll differently, so the continuous onScrollProgress callback is still necessary as a general API. Threshold callbacks would be an addition, not a replacement.

Current Status

Creative-side caching is the practical fix now. Engine-side threshold API is a future consideration.