Tagged articles
14 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.

IntersectionObserverJavaScriptPerformance Optimization
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
Aug 22, 2024 · Frontend Development

Understanding Virtual Scrolling in Frontend Development: Principles, Use Cases, and Implementation

This article explains the concept of virtual scrolling, why it is needed for performance in web pages, outlines two main implementation strategies, and provides detailed Vue‑based code examples—including Element‑Plus Infinite Scroll and a custom VirtualList class—to help developers apply the technique effectively.

Element PlusVueinfinite scroll
0 likes · 24 min read
Understanding Virtual Scrolling in Frontend Development: Principles, Use Cases, and Implementation
Rare Earth Juejin Tech Community
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.

Virtualizationinfinite scrollintersection observer
0 likes · 20 min read
Boosting Frontend Rendering Performance with react-virtualized-list and Intersection Observer
Baidu MEUX
Baidu MEUX
Nov 1, 2023 · Frontend Development

Why Infinite Scroll Is Harmful and How Designers Can Stop It

The article examines the origins, benefits, and serious technical, accessibility, and psychological drawbacks of infinite scrolling, highlighting how it fuels addiction and hampers SEO, and proposes practical design interventions—such as explicit load‑more buttons, end‑of‑feed cues, and usage timers—to help users regain control.

UX designUser experienceaddiction
0 likes · 13 min read
Why Infinite Scroll Is Harmful and How Designers Can Stop It
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 6, 2023 · Frontend Development

Efficient Rendering of Large Datasets in Vue.js Frontend Applications

This article demonstrates several techniques—including server‑side data simulation, batch rendering with timers, requestAnimationFrame, pagination components, infinite scroll, and virtual lists—to efficiently display and interact with 100,000 records in a Vue.js front‑end without causing UI freezes or performance degradation.

Large Datafrontendinfinite scroll
0 likes · 21 min read
Efficient Rendering of Large Datasets in Vue.js Frontend Applications
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 15, 2022 · Frontend Development

Building a Seamless Infinite Scroll Component with Vue 3

This article explains why infinite scrolling is essential for large‑screen dashboards, analyses three implementation strategies, and provides a complete Vue 3 component—including BEM‑styled markup, GSAP‑driven animation, slot‑based content insertion, and optional hover‑pause behavior—to achieve a smooth, endless scrolling list.

BEMComponent DesignGSAP
0 likes · 14 min read
Building a Seamless Infinite Scroll Component with Vue 3
DaTaobao Tech
DaTaobao Tech
Aug 5, 2022 · Frontend Development

Front-End Development Guide for Short Video Infinite Scroll

The guide details building a short‑video infinite‑scroll interface using a vertical Swiper carousel with virtual slides, custom HTML5 video players, status buttons, and a fixed loading bar, ensuring only the visible card renders video and minimizing memory for endless content streams.

Code Samplesinfinite scrollswiper
0 likes · 9 min read
Front-End Development Guide for Short Video Infinite Scroll
DaTaobao Tech
DaTaobao Tech
Apr 26, 2022 · Artificial Intelligence

Optimization of Recall, Ranking, and Downward Modeling for the "Every Square Every House" Infinite-Scroll Light App

This article details a year‑long series of experiments on the Taobao “Every Square Every House” infinite‑scroll light app, describing how added recall paths, a coarse‑ranking filter, multi‑task MMOE sorting, a lightweight down‑scroll predictor, and relevance‑enhanced features together boosted click‑through, scroll depth and per‑user engagement by double‑digit percentages.

A/B testingModel Optimizationinfinite scroll
0 likes · 14 min read
Optimization of Recall, Ranking, and Downward Modeling for the "Every Square Every House" Infinite-Scroll Light App
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