BestHub
Sign in
Tag

requestAnimationFrame

2 views collected around this technical thread.

Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 12, 2025 · Frontend Development

Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements

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.

DOMEvent LoopJavaScript
0 likes · 16 min read
Understanding Browser Rendering, Event Loop, and Techniques to Avoid Page Jank When Adding Massive DOM Elements
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Apr 22, 2025 · Frontend Development

Vue Directive for Continuous List Scrolling Animation with Pause on Interaction

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.

DirectiveVueanimation
0 likes · 5 min read
Vue Directive for Continuous List Scrolling Animation with Pause on Interaction
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 24, 2024 · Frontend Development

Understanding requestAnimationFrame: Usage, Advantages, and Practical Examples

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.

JavaScriptanimationfrontend
0 likes · 9 min read
Understanding requestAnimationFrame: Usage, Advantages, and Practical Examples
Baidu Geek Talk
Baidu Geek Talk
Dec 18, 2023 · Frontend Development

Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics

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.

Event LoopFIDINP
0 likes · 19 min read
Browser Event Loop Mechanism: Complete Guide to Rendering, Performance Optimization and Interaction Metrics
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2022 · Frontend Development

Understanding requestAnimationFrame: Usage, Timing, Performance, and Compatibility

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.

JavaScriptReactbrowser
0 likes · 11 min read
Understanding requestAnimationFrame: Usage, Timing, Performance, and Compatibility
58 Tech
58 Tech
May 26, 2022 · Frontend Development

Advanced Timer Techniques in Frontend Development

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.

JavaScriptfrontendperformance
0 likes · 19 min read
Advanced Timer Techniques in Frontend Development
政采云技术
政采云技术
Sep 28, 2021 · Frontend Development

Browser Rendering: Reflow and Repaint

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.

GPU Accelerationbrowser renderingfrontend
0 likes · 17 min read
Browser Rendering: Reflow and Repaint
NetEase Media Technology Team
NetEase Media Technology Team
Jul 23, 2021 · Frontend Development

CSS Animation Techniques for Medal Unlock and Gyroscope Effects

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.

3D effectsCSS animationDevice Orientation
0 likes · 10 min read
CSS Animation Techniques for Medal Unlock and Gyroscope Effects
Yuewen Frontend Team
Yuewen Frontend Team
May 28, 2018 · Frontend Development

Master Simple Easing: Plug‑and‑Play Animation Algorithm for UI

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.

JavaScriptanimationeasing
0 likes · 12 min read
Master Simple Easing: Plug‑and‑Play Animation Algorithm for UI
JD Tech
JD Tech
May 22, 2018 · Frontend Development

Creating Animated Wave Effects with WebGL and requestAnimationFrame

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.

JavaScriptShaderWebGL
0 likes · 9 min read
Creating Animated Wave Effects with WebGL and requestAnimationFrame
Qudian (formerly Qufenqi) Technology Team
Qudian (formerly Qufenqi) Technology Team
Jan 17, 2017 · Frontend Development

Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive

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.

animationfrontendperformance
0 likes · 9 min read
Why requestAnimationFrame Beats setTimeout for Smooth Animations – A Deep Dive