How to Build a High‑Performance Barrage Animation with Minimal Data Load

Requirements

Each barrage item should expand with a fade‑in avatar that grows and scrolls upward.

Business Requirements

The backend returns a fixed number of barrage messages; after a certain interval the client requests new messages to replace the current ones, looping when no more data is available.

Approach & Code Logic

To improve component extensibility, each barrage is rendered as slot content.

<div class="barrage-box">
  <!-- showData is the data to display -->
  <template v-for="(item, index) of showData">
    <div v-if="beginData[index]" :key="item.uid">
      <slot :item="item.item"><!-- custom barrage area --></slot>
    </div>
  </template>
</div>

Optimization 1: Minimal Data Loading

Instead of loading all avatar data at once, only the minimal number of DOM elements needed for display are loaded on demand, greatly reducing CDN request pressure.

Optimization 2: Timeline Control

// timelineEnd, animation switch function
function timelineEnd() {
  /**
   * Assume at most 3 barrages are shown; backend returns 20 items.
   * showIndex: index of the barrage to display (0‑2).
   * feedIndex: index of the data consumed (0‑19).
   */
  showData.value.splice(showIndex.value, 1, listData.value[feedIndex.value]);
  beginData.value.splice(showIndex.value, 1, true);
  showIndex.value = showIndex.value === props.showNum ? 0 : showIndex.value + 1;
  feedIndex.value = feedIndex.value === listData.value.length - 1 ? 0 : feedIndex.value + 1;
}

The component switches showIndex and feedIndex to rotate displayed data.

<div class="barrage-timeline" @animationiteration="timelineEnd" />
/* CSS */
@keyframes timeline { 0% { opacity: 0; } 100% { opacity: 1; } }
.barrage-timeline { will-change: opacity; animation: timeline 1s infinite; }

Optimization 3: Performance & Low‑End Compatibility

Prefer 2D CSS animations over 3D GPU acceleration to avoid excessive layer creation, especially on iOS devices. Use Chrome devtools to simulate reduced CPU frequency and monitor FPS for frame drops.

useRafFn(() => {
  const now = Date.now();
  if (now - lastTime > 1000) { lastTime = now; timelineEnd(); }
});

This leverages requestAnimationFrame to fill rendering gaps and improve smoothness.

For width‑transition effects that may strain low‑end devices, a configuration list disables the transition on such devices:

// Determine if the device is low‑end
const isLowDevice = computed(() => window.islowp);
if (!isLowDevice) { /* enable width transition */ }

Other Considerations

Additional measures include handling background throttling, providing placeholder avatars for failed requests, and other edge‑case optimizations.

Result & Summary

The final implementation balances resource loading, animation timing, layer count, FPS monitoring, and low‑end device compatibility to deliver a stable barrage experience.

Control the amount of loaded resources and provide fallbacks.

Manage animation timelines carefully to avoid instability.

Limit layer creation to reduce memory usage.

Continuously monitor performance, especially FPS.

Ensure compatibility with low‑end devices.