Tagged articles
16 articles
Page 1 of 1
JD Retail Technology
JD Retail Technology
Apr 28, 2026 · Mobile Development

How Taro 5.0 Delivers a High‑Performance iOS Rendering Layer and a Unified Cross‑Platform UI Framework

The article explains why existing cross‑platform solutions cannot meet Taro’s demands for high performance, stability, full Taro ecosystem compatibility and low integration cost, and describes the design of a dual‑thread iOS rendering layer, a mixed native‑view + layer approach, and the C++‑based TaroUI framework that provides consistent, high‑speed UI components, a rich‑text engine, virtual list widgets and an extensible architecture for future platforms.

C++ frameworkTarocross‑platform UI
0 likes · 19 min read
How Taro 5.0 Delivers a High‑Performance iOS Rendering Layer and a Unified Cross‑Platform UI Framework
Sohu Tech Products
Sohu Tech Products
Mar 12, 2025 · Frontend Development

How to Build a High‑Performance Fixed‑Height Virtual List in Vue

This article explains why rendering massive lists can freeze devices, introduces the concept of a fixed‑height virtual list that renders only visible items, and provides step‑by‑step Vue code to calculate visible ranges, handle scrolling, and fix off‑by‑one glitches.

Vuefixed heightfrontend
0 likes · 11 min read
How to Build a High‑Performance Fixed‑Height Virtual List in Vue
Rare Earth Juejin Tech Community
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.

Time Slicingfrontendvirtual list
0 likes · 13 min read
Efficiently Rendering 100,000 Items with Time Slicing and Virtual List in Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 9, 2024 · Frontend Development

Implementing a Waterfall Layout with Virtual List in Vue3 and TypeScript

This article provides a step‑by‑step guide on building a responsive waterfall (masonry) layout combined with a virtual list in Vue 3 using TypeScript, covering data preparation, container sizing, position calculation, infinite scroll loading, handling variable card heights, and responsive column adjustments.

Responsive DesignTypeScriptVue3
0 likes · 24 min read
Implementing a Waterfall Layout with Virtual List in Vue3 and TypeScript
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 8, 2024 · Frontend Development

How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor

This article details the migration of the Cloud Music desktop client from a legacy NEJ‑CEF hybrid to a React‑based architecture, outlines four major performance challenges, and explains the step‑by‑step optimizations—including API preloading, render memoization, virtual‑list replacement, and resource‑usage reductions—that cut startup latency by 48%, eliminated interaction stutter, and dramatically lowered CPU, GPU, and memory consumption.

CPUGPUHybrid App
0 likes · 30 min read
How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 11, 2024 · Frontend Development

Implementing a Virtual Waterfall List in Vue 3 + TypeScript with Dynamic Height Support

This article provides a step‑by‑step tutorial on building a virtual waterfall (masonry) list component in Vue 3 using TypeScript, covering component structure, props, state management, rendering logic, handling variable item heights via temporary DOM measurement, performance optimizations, and practical usage examples.

Vuefrontendperformance
0 likes · 36 min read
Implementing a Virtual Waterfall List in Vue 3 + TypeScript with Dynamic Height Support
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
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 7, 2023 · Frontend Development

Implementing Fixed, Variable, and Dynamic Height Virtual Lists with react-window

This article explains the core principles of virtual scrolling and provides complete React implementations for three types of virtual lists—fixed‑height, variable‑height, and dynamic‑height—using react-window, including detailed code snippets, performance considerations, and optimization suggestions.

Reactfrontendperformance
0 likes · 17 min read
Implementing Fixed, Variable, and Dynamic Height Virtual Lists with react-window
HelloTech
HelloTech
Nov 8, 2022 · Frontend Development

Mastering Virtual Lists in Vue: From Fixed Height to Dynamic Items

This article explains why virtual lists are needed for long scrollable data, defines the concept, walks through a step‑by‑step implementation for fixed‑height items, extends the solution to handle variable heights, and shares practical tips and code snippets for Vue developers.

Vuedynamic heightfrontend performance
0 likes · 11 min read
Mastering Virtual Lists in Vue: From Fixed Height to Dynamic Items
政采云技术
政采云技术
Oct 25, 2022 · Frontend Development

Optimizing Large List Rendering: A Guide to Implementing Virtual Lists Using IntersectionObserver

This technical guide explores how to optimize frontend performance when rendering large datasets by implementing virtual lists using the native IntersectionObserver API, detailing configuration steps, troubleshooting common rendering issues, and comparing its asynchronous advantages against traditional scroll event listeners.

DOM optimizationJavaScript APIWeb Development
0 likes · 10 min read
Optimizing Large List Rendering: A Guide to Implementing Virtual Lists Using IntersectionObserver
360 Smart Cloud
360 Smart Cloud
Aug 24, 2022 · Frontend Development

Common Big Data Scenarios and Front-End Techniques for Rendering Large Data Sets

This article explores typical big-data use cases such as real-time bullet comments and massive server-side data lists, analyzes why rendering thousands of DOM elements can cause page lag, and presents front-end solutions—including dynamic element creation, document fragments, and virtual scrolling libraries—to improve performance.

DOM optimizationReactVue
0 likes · 9 min read
Common Big Data Scenarios and Front-End Techniques for Rendering Large Data Sets
Aotu Lab
Aotu Lab
Apr 21, 2022 · Frontend Development

How to Build a High‑Performance Vertical‑Scroll Calendar with NutUI

This article explains the design and implementation of NutUI's vertical‑scroll Calendar component, covering data initialization, virtual‑list rendering, scroll and boundary handling, and extensible slots, props, and events to achieve both smooth interaction and optimal performance.

CalendarDate Pickernutui
0 likes · 12 min read
How to Build a High‑Performance Vertical‑Scroll Calendar with NutUI
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
Aotu Lab
Aotu Lab
Jul 1, 2020 · Frontend Development

What’s New in Taro 3? Cross‑Framework and Cross‑Platform Features Unveiled

Taro 3 introduces full cross‑framework support for React, Nerv, Vue 2/3 and jQuery‑like APIs, expands to major mini‑program platforms and H5, adds an open plugin system, prerendering, faster builds, CSS‑in‑JS via linaria, virtual list components and a seamless WeChat‑to‑React/Vue conversion tool.

CSS-in-JSPlugin SystemTaro
0 likes · 11 min read
What’s New in Taro 3? Cross‑Framework and Cross‑Platform Features Unveiled