Dynamic Floor-Based Architecture for JD.com Mobile Product Detail Page

The product detail page (PDP) is a critical component influencing user purchase decisions, requiring flexible layouts to accommodate diverse product types on JD.com.

Traditional static implementations using ScrollView and ViewStubs faced numerous issues: difficulty in A/B testing floor positions, inability to quickly downgrade problematic floors, high memory consumption, frequent crashes, and the need for full client releases for layout changes.

To address these problems, a dynamic floor‑based architecture was introduced, allowing server‑controlled layout composition. Floors are treated as independent building blocks (similar to LEGO), each representing a specific UI segment such as title, address, or video trace.

The implementation follows five main steps: 1) Split Floors – decompose the PDP into minimal independent sections; 2) Assemble Floors – order and render floors based on server‑provided templates; 3) Generate Floor Entities – create entity objects with flags indicating visibility; 4) Select Visible Floors – filter entities with true flags; 5) Render Floors – display the selected floors on the screen.

Key technical challenges include precise floor position maintenance, handling of separator lines as independent floors, and choosing the appropriate container. After evaluating ListView, ScrollView, and RecyclerView, RecyclerView was selected for its flexible item type handling and dynamic insertion/deletion capabilities.

For complex floors that cause scrolling lag, a bitmap‑substitution technique is employed: the floor view is rendered to a bitmap when detached, displayed as an image during scroll, and restored to the original view when scrolling stops, thus smoothing the user experience.