Skip to main content

Optimize Size Update

Use the optimizeSizeUpdate option to skip forced panel rendering (forceRenderAllPanels) when the size change occurs on an axis irrelevant to the Flicking direction, optimizing performance.

Try swiping through panels and compare the flickering difference between the two carousels.
With optimizeSizeUpdate: false, all 200 panels are inserted into and removed from the DOM on every height change, causing flickering.
With true, this process is skipped when only the height changes, resulting in smooth operation without flickering.

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const PANEL_COUNT = 200;
const HEIGHTS = ["panel-h120", "panel-h130", "panel-h140", "panel-h150", "panel-h160"];
const HEIGHT_LABELS = [120, 130, 140, 150, 160];

function createPanels(cameraEl) {
  for (let i = 0; i < PANEL_COUNT; i++) {
    const panel = document.createElement("div");
    panel.className = `flicking-panel ${HEIGHTS[i % 5]}`;
    panel.textContent = `Panel ${i + 1} (${HEIGHT_LABELS[i % 5]}px)`;
    cameraEl.appendChild(panel);
  }
}

createPanels(document.querySelector("#flick-off .flicking-camera"));
createPanels(document.querySelector("#flick-on .flicking-camera"));

new Flicking("#flick-off", {
  renderOnlyVisible: true,
  autoResize: true,
  optimizeSizeUpdate: false
});

new Flicking("#flick-on", {
  renderOnlyVisible: true,
  autoResize: true,
  optimizeSizeUpdate: true
});
Open on CodeSandboxOpen Sandbox

Summary​

Key Options​

OptionTypeDefaultDescription
optimizeSizeUpdatebooleanfalseSkip forced panel rendering when irrelevant axis changes based on direction

Direction-Based Behavior​

Flicking DirectionForce Rendering Condition with optimizeSizeUpdate: true
horizontal (default)Force renders all panels only when width changes
verticalForce renders all panels only when height changes

Details​

Flow: When autoResize Detects a Height Change​

In an autoResize: true + renderOnlyVisible: true environment, the following flow occurs when only the viewport height changes:

1. Viewport height changes (panel height differences, external layout changes, etc.)

2. autoResize's ResizeObserver detects the height change
   -> flicking.resize() called

3. Inside resize(), forceRenderAllPanels()
   -> All hidden panels are inserted into DOM (cameraEl.appendChild)
   -> Browser briefly renders all panels -> unnecessary DOM manipulation!

4. renderer.render()
   -> Non-visible panels removed from DOM again

With optimizeSizeUpdate: true applied:
   -> If width hasn't changed in a horizontal Flicking
   -> forceRenderAllPanels() is skipped -> DOM manipulation prevented

How optimizeSizeUpdate Works​

Inside Flicking's resize(), forceRenderAllPanels() is called to accurately measure all panel sizes. This method renders all panels to the DOM so their sizes can be measured.

When using renderOnlyVisible or virtual rendering, non-visible panels are normally removed from the DOM. During resize(), inserting and removing all these panels becomes increasingly expensive as the panel count grows.

With optimizeSizeUpdate: true, this forced rendering is skipped when only the axis irrelevant to the Flicking direction has changed.

resize() internal flow:

1. viewport.resize()                          <- Always executed
2. forceRenderAllPanels()                     <- Part controlled by optimizeSizeUpdate
   - false: Always renders all panels to DOM
   - true: Only renders when the relevant axis changes (horizontal->width, vertical->height)
3. updatePanelSize() -> render()               <- Always executed

Prerequisites​

When This Is Effective

This option is effective when used with autoResize: true in combination with renderOnlyVisible: true or virtual rendering.
In normal rendering mode, all panels are always in the DOM, so forceRenderAllPanels() has virtually no cost.

Use Cases​

When should you use this?
  • autoResize: true + renderOnlyVisible: true + many panels: Reduces unnecessary DOM manipulation when only viewport height changes, improving performance
  • Horizontal slider inside vertical scroll: Prevents unnecessary rendering of hidden panels on height changes from scrolling
  • Virtual rendering environment: Prevents unnecessary render/unmount of virtual panels

Notes​

Caution
  • Only works when autoResize: true
  • Has no effect without renderOnlyVisible or virtual rendering
  • If panel size depends on the container height (e.g., height: 100%), using this option may prevent panel sizes from being updated