intersection observer

Rare Earth Juejin Tech Community

Jul 10, 2024 · Frontend Development

Boosting Frontend Rendering Performance with react-virtualized-list and Intersection Observer

This article explains how the react-virtualized-list library combined with the Intersection Observer API can dramatically improve rendering performance for large data sets, achieving up to 95% faster page loads and smoother infinite scrolling on both PC and mobile browsers.

Infinite ScrollPerformanceVirtualization

0 likes · 20 min read

Boosting Frontend Rendering Performance with react-virtualized-list and Intersection Observer

Rare Earth Juejin Tech Community

May 30, 2024 · Frontend Development

Virtual Scrolling Techniques and Performance Optimization for Large Document Editors

This article explains how virtual scrolling can dramatically improve the performance of large online document editors by rendering only visible content, discusses various implementation strategies such as progressive pagination, canvas rendering, line‑ and block‑level virtualization, and details state management, view‑locking, fast‑scroll handling, and integration scenarios like anchor navigation, find‑replace, and comment systems, while providing code examples and performance test results.

Performance OptimizationVirtual Scrollingfrontend

0 likes · 57 min read

Virtual Scrolling Techniques and Performance Optimization for Large Document Editors

Rare Earth Juejin Tech Community

Nov 23, 2022 · Frontend Development

Front‑end Performance Optimization: Lazy Loading Techniques (Route, Image, and Module)

This article introduces front‑end lazy‑loading strategies—including route lazy loading, three image lazy‑loading methods (native, scroll‑event, and IntersectionObserver), and module lazy loading—explaining their principles, showing complete React/Vue code examples, and demonstrating how they reduce initial load time and improve user experience.

Performance OptimizationVuefrontend

0 likes · 12 min read

Front‑end Performance Optimization: Lazy Loading Techniques (Route, Image, and Module)

ByteFE

Apr 26, 2021 · Frontend Development

Optimizing Long Page Rendering in React: Lazy Loading, Intersection Observer, and Memoization

This article explains how to improve performance of long React pages by rendering components screen‑by‑screen using viewport detection (getBoundingClientRect or Intersection Observer), grouping data, debouncing scroll handlers, and applying React.memo to prevent duplicate data requests.

Performance OptimizationReact.memointersection observer

0 likes · 9 min read