Time Slicing | BestHub

Rare Earth Juejin Tech Community

Nov 23, 2024 · Frontend Development

Efficiently Rendering 100,000 Items with Time Slicing and Virtual List in Frontend Development

This article explains how to avoid UI freezes when rendering massive data sets in the browser by using time‑slicing techniques such as setTimeout or requestAnimationFrame together with document fragments, and by implementing a virtual list component in Vue to render only the visible portion of the data.

JavaScriptPerformanceTime Slicing

0 likes · 13 min read

Efficiently Rendering 100,000 Items with Time Slicing and Virtual List in Frontend Development

Rare Earth Juejin Tech Community

Nov 22, 2022 · Frontend Development

React Scheduler: Implementing Idle‑Time Execution and Time Slicing with requestAnimationFrame, postMessage and MessageChannel

This article explains how React simulates requestIdleCallback by combining requestAnimationFrame, postMessage, and MessageChannel to execute work during browser idle periods, detailing the evolution from the early rAF‑postMessage approach in v16 to the message‑loop implementation in v18 and providing simplified source code examples.

MessageChannelReActScheduler

0 likes · 14 min read

React Scheduler: Implementing Idle‑Time Execution and Time Slicing with requestAnimationFrame, postMessage and MessageChannel

360 Tech Engineering

Jun 17, 2019 · Frontend Development

Making Your Web Pages Smooth: Performance Optimization Techniques

This article explains how to make web pages feel smooth by defining user‑perceived fluidity, discussing passive and active interactions, FPS targets, the RAIL model, pixel pipeline optimization, avoiding long tasks with Web Workers and time‑slicing, selector efficiency, layout thrashing, layer management, and using requestAnimationFrame.

RAIL modelTime Slicingfrontend

0 likes · 21 min read

Making Your Web Pages Smooth: Performance Optimization Techniques