BestHub
Sign in
Tagged articles
16 articles
Page 1 of 1
JavaScript
JavaScript
Mar 15, 2025 · Frontend Development

Master High-Performance Infinite Scroll with Just 7 Lines of JavaScript

Learn how to replace traditional, resource‑heavy infinite scroll implementations with a concise seven‑line JavaScript solution that leverages IntersectionObserver, DOM recycling, state locking, and lazy image loading, delivering dramatically lower CPU and memory usage while boosting frame rates to smooth 60 fps experiences.

IntersectionObserverJavaScriptfrontend
0 likes · 6 min read
Master High-Performance Infinite Scroll with Just 7 Lines of JavaScript
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 7, 2025 · Frontend Development

Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features

This article explains how to build a high‑performance infinite‑scroll waterfall layout for e‑commerce using CSS Grid, IntersectionObserver, native lazy‑loading attributes, asynchronous decoding, React's useTransition, content‑visibility, and the AVIF image format to reduce load time and improve smoothness.

AVIFCSS GridContent-Visibility
0 likes · 13 min read
Optimizing Infinite‑Scroll Waterfall Layouts with CSS Grid, IntersectionObserver, and Modern Browser Features
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2023 · Frontend Development

Understanding and Using IntersectionObserver for Lazy Loading, Scroll Animations, Infinite Scrolling, and Virtual Lists

This article introduces the IntersectionObserver API, explains its constructor, options, and entry properties, and demonstrates practical applications such as lazy loading images, scroll‑triggered animations, infinite scrolling, and virtual list rendering with complete code examples.

IntersectionObserverScroll AnimationWeb API
0 likes · 11 min read
Understanding and Using IntersectionObserver for Lazy Loading, Scroll Animations, Infinite Scrolling, and Virtual Lists
JD Tech
JD Tech
Oct 20, 2023 · Frontend Development

Common Methods for Listening to List Item Exposure in Frontend Development

This article explains why front‑end data‑collection (exposure) points are crucial, outlines three main techniques—estimating visibility from paginated data, listening to scroll events with bounding‑box calculations, and using the IntersectionObserver API—detailing their implementation, advantages, drawbacks, and best‑practice usage across H5, mini‑programs, and Taro.

Exposure TrackingIntersectionObserverMini Program
0 likes · 23 min read
Common Methods for Listening to List Item Exposure in Frontend Development
HomeTech
HomeTech
Oct 11, 2023 · Frontend Development

Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.

CSSIntersectionObserverJavaScript
0 likes · 10 min read
Implementing a Sticky Tabs Component with Custom Scroll Behavior in React
JD Retail Technology
JD Retail Technology
Aug 3, 2023 · Frontend Development

Exposure Tracking for List Elements in Frontend Development

This article explains why exposure tracking (埋点) is essential for front‑end developers, compares three implementation methods—pagination‑based estimation, scroll‑event calculations, and the Intersection Observer API—provides detailed advantages, drawbacks, code examples, and platform‑specific guidance for Web, mini‑programs, and Taro frameworks.

Exposure TrackingIntersectionObserverList
0 likes · 21 min read
Exposure Tracking for List Elements in Frontend Development
政采云技术
政采云技术
Aug 2, 2023 · Frontend Development

Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver

This article describes how to abstract and improve DOM exposure tracking by first using a scroll listener with getBoundingClientRect and then refactoring to a more robust IntersectionObserver implementation, including code examples, configuration details, and compatibility considerations.

DOMExposureIntersectionObserver
0 likes · 8 min read
Encapsulating DOM Exposure: From Scroll Listener to IntersectionObserver
DaTaobao Tech
DaTaobao Tech
Sep 20, 2022 · Frontend Development

Understanding Intersection Observer API and Its Polyfill Implementation

The article explains how the Intersection Observer API offloads visibility detection from scroll events to improve performance, details its creation, options, callback structure, and entry data, and describes a polyfill that mimics native behavior using event listeners, mutation observers, and geometric calculations for broader browser support.

IntersectionObserverJavaScriptPolyfill
0 likes · 16 min read
Understanding Intersection Observer API and Its Polyfill Implementation
IT Services Circle
IT Services Circle
Feb 16, 2022 · Frontend Development

Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver

This article explains how to use the five browser Observer APIs—IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver—to monitor element visibility, attribute changes, size adjustments, performance metrics, and browser interventions, providing code examples and practical use cases.

IntersectionObserverMutationObserverReportingObserver
0 likes · 10 min read
Using Browser Observer APIs: IntersectionObserver, MutationObserver, ResizeObserver, PerformanceObserver, and ReportingObserver
ByteFE
ByteFE
Aug 18, 2021 · Frontend Development

Understanding and Using the Intersection Observer API for Visibility Detection in Frontend Development

This article explains the purpose, core concepts, configuration options, callback handling, and practical use‑cases of the Intersection Observer API—such as lazy loading, infinite scrolling, sticky headers, and analytics—while providing complete Vue 3 code examples and compatibility notes.

IntersectionObserverSticky HeaderVisibility Detection
0 likes · 21 min read
Understanding and Using the Intersection Observer API for Visibility Detection in Frontend Development
Ctrip Technology
Ctrip Technology
Jul 15, 2021 · Frontend Development

Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List

This article examines the performance bottlenecks of a Taro3 mini‑program list page after migrating from Taro1, analyzes causes such as excessive node rendering and large setState payloads, evaluates backend pagination and the built‑in virtual list, and presents a custom virtual‑list implementation that reduces rendered nodes, uses screen‑height placeholders, and achieves roughly 45% faster rendering and 50% quicker interaction response.

IntersectionObserverReactTaro
0 likes · 12 min read
Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List
政采云技术
政采云技术
Mar 30, 2021 · Frontend Development

Implementing Front‑end Exposure Tracking with a Custom Vue Directive

This article explains how to build a reliable front‑end exposure (view) tracking solution for e‑commerce pages by using the native IntersectionObserver API together with a custom Vue directive, covering the definition of effective exposure, required business rules, and complete code implementation.

Custom DirectiveExposure TrackingIntersectionObserver
0 likes · 11 min read
Implementing Front‑end Exposure Tracking with a Custom Vue Directive
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Oct 30, 2020 · Frontend Development

Building a Declarative, Component‑Based Tracking System with Buffer Queues in React

This article analyzes the challenges of front‑end event tracking, compares existing manual, visual, and full‑tracking solutions, and presents a declarative component architecture with a buffered queue that decouples tracking logic from business code while handling click and exposure events efficiently in React.

Buffer QueueComponentIntersectionObserver
0 likes · 12 min read
Building a Declarative, Component‑Based Tracking System with Buffer Queues in React
WecTeam
WecTeam
Nov 14, 2019 · Frontend Development

Unlocking Intersection Observer: Deep Dive, Performance Tests & Advanced Tricks

This comprehensive guide explores the Intersection Observer API, explaining its core concepts, detailed code examples, performance comparisons with scroll events, advanced usage like sticky positioning, visibility tracking, and browser compatibility, providing developers with practical insights to efficiently implement and optimize intersection-based interactions.

IntersectionObserverJavaScriptWeb API
0 likes · 32 min read
Unlocking Intersection Observer: Deep Dive, Performance Tests & Advanced Tricks
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Nov 6, 2018 · Frontend Development

Master Image Lazy Loading: From Scroll Events to IntersectionObserver

This article explains why loading all images in a long list hurts performance, presents step‑by‑step lazy‑loading techniques—including placeholder images, scroll calculations, getBoundingClientRect, and the modern IntersectionObserver API—provides full code samples, and discusses optimization tips for smoother front‑end experiences.

IntersectionObserverJavaScriptimage-optimization
0 likes · 9 min read
Master Image Lazy Loading: From Scroll Events to IntersectionObserver