The article explains how the browser’s single‑threaded nature makes long JavaScript tasks block rendering, outlines the timing issues of setTimeout, introduces requestAnimationFrame for visual sync, and shows how requestIdleCallback can safely schedule low‑priority work during idle periods.
This article explains the underlying browser mechanisms that cause page jank when creating millions of DOM elements, analyzes the event loop, rendering pipeline, macro‑ and micro‑tasks, and presents practical solutions such as setTimeout, requestAnimationFrame, MessageChannel, and requestIdleCallback to keep the UI responsive.
This article explains how to create a reusable Vue directive that animates a list scrolling continuously using requestAnimationFrame, allows pausing on mouse click, and lets users adjust the scroll speed, with a complete code example and detailed implementation notes.
This article explains the requestAnimationFrame API, demonstrates basic and recursive usage with code samples, compares it to setTimeout/setInterval, shows how to cancel frames, and presents real‑world front‑end scenarios such as smooth animations and scroll‑loading optimizations.
The guide explains the browser’s event‑loop cycle, how macro‑tasks, micro‑tasks, requestAnimationFrame and requestIdleCallback interact with rendering, details long‑task impacts, React’s time‑slicing via MessageChannel, key interaction metrics such as TTI, FID and upcoming INP, and practical optimizations like task splitting, lazy loading and service‑worker caching.
This article explains the requestAnimationFrame API, demonstrates basic and cancelable animation examples, discusses its execution timing within the browser frame lifecycle, compares its performance to setTimeout, covers compatibility and polyfills, and shows how to wrap it in a React hook for practical use.
This article walks through creating a simple Node server, building a basic HTML/JS front‑end, and applying performance techniques such as pagination with setTimeout, requestAnimationFrame, document fragments, and lazy‑loading to render massive data sets smoothly.
This article examines the challenges of timer precision in front‑end scenarios such as e‑commerce flash sales, explains the limitations of native setInterval and setTimeout, and introduces a frame‑based timer using requestAnimationFrame, requestIdleCallback and compensation strategies to achieve high‑accuracy scheduling.
requestAnimationFrame lets browsers schedule animation callbacks just before the next repaint, offering smoother 60 Hz updates compared to setTimeout; this article explains its API, demonstrates code examples, explores the event loop, task and microtask queues, rendering timing, cross‑browser quirks, and best practices for efficient animation and task splitting.
This article explains the browser rendering pipeline, the concepts of reflow and repaint, how they are triggered, their performance impact, and provides practical techniques such as minimizing layout thrashing, using GPU‑accelerated properties, and leveraging requestAnimationFrame to optimize front‑end performance.
The article explains how to create a seamless medal‑unlock animation using layered SVG clipPath tricks and a four‑step CSS process, and how to build an interactive gyroscope effect with deviceorientation events, while emphasizing performance‑friendly practices such as using transform, opacity, requestAnimationFrame, and avoiding reflow‑inducing properties.
This article explains browser frame concepts, the rendering pipeline, and how to optimize animations by understanding the relationship between frames, requestAnimationFrame, and the main thread processes.
This article explains how Lottie uses JSON exported from Adobe After Effects via the Bodymovin plugin to render vector animations on the web, detailing the export workflow, JSON structure, renderer initialization, layer processing, and the requestAnimationFrame‑driven playback loop with code examples.
Learn the essential techniques for creating silky‑smooth, 60 fps web animations by understanding frame timing, reducing layout and paint costs, leveraging requestAnimationFrame, applying hardware acceleration, and optimizing rendering pipelines to avoid jank and improve performance across browsers.
This article introduces a lightweight easing algorithm that moves an element by half the remaining distance each frame, provides a requestAnimationFrame polyfill, a reusable Math.easeout function, and shows real‑world usage in Qidian's scroll‑to‑top and other UI effects.
This tutorial walks through building a dynamic wave animation in WebGL by converting canvas coordinates, generating point vertices with sine functions, using requestAnimationFrame for smooth updates, and customizing point sizes via buffer attributes, providing complete JavaScript code snippets and shader modifications.
This article explains the inner workings of requestAnimationFrame, detailing why setTimeout/setInterval fall short, how Chrome's animation controller registers and fires callbacks, and the call stack that drives frame updates, complete with code excerpts and diagrams.
An in‑depth investigation compares requestAnimationFrame and setTimeout for web animations, revealing how the former syncs with browser repaint cycles, why it outperforms setTimeout, the limits of manually adjusting frame rates, compatibility issues across browsers and platforms, and practical fallback implementations.
