How Taobao’s Home Page Evolved: From PHP to Node and Scaling to Billions of Views

1. Background Overview

Taobao’s home page is the face of the platform, handling billions of daily page views. Although mobile traffic has grown, the PC home page still receives massive PV, making it a critical entry point for many Taobao services.

2. Overall Evolution of the Home Page

The home page relies on an internal page‑building platform, so its changes follow the platform’s upgrades.

2.1 PHP Era

Initially the home page ran on PHP. All code was front‑end controlled, with data coming from two sources: operationally filled forms ("digging pits") and backend or personalization services. Operators filled form fields that generated PHP templates, which rendered complete HTML fragments in real time.

Data from backend services varied widely, requiring many JSONP interfaces and sometimes special handling for ads.

2.2 Migration from PHP to Node

Serving the massive request volume required a service cluster. PHP rendering on each CDN node caused performance and stability issues due to disk I/O, outdated PHP versions, and fast‑CGI limitations.

Switching to a Node‑based rendering cluster behind a cache‑only CDN improved efficiency, reduced latency, and lowered operational costs.

// @邦彦 同学补充：php 的 include 操作是存在消耗，但是加载、执行的过程预热后，字节码直接进缓存，并不存在频繁磁盘 io 的情况。cdn php 性能差的问题主要是两个：1. php 版本过旧，5.4 和 7 的性能相差不只几倍；2. fast-cgi 模式在高并发的场景下和 node 相比没有任何优势。

2.3 Node‑Based Rendering Model

Each module now bundles its CSS, JS, and template together, enabling independent execution and easier reuse. Modules are defined by JSON Schema, and the platform parses these schemas to generate the necessary HTML.

All module templates are merged into a single page template on the source‑side Node server, and CSS/JS files are combined into single requests (e.g., http://cdn/??mod1.css,mod2.css,mod3.css).

3. Performance Optimization

The home page contains thousands of modules, resulting in a DOM size exceeding 4k elements. To avoid blocking the main thread, only the first‑screen modules are loaded eagerly, while others are lazy‑loaded based on user interaction.

Rendering logic includes traversing all modules, marking non‑essential modules with a tb-pass class, separating first‑screen and non‑first‑screen modules, and monitoring scroll events to trigger lazy loading.

4. Stability Assurance

High traffic amplifies any minor issue, so the team implements two key safeguards: disaster‑recovery mechanisms and monitoring/alerting.

Disaster recovery includes hard fallbacks for asynchronous API failures and error pages for synchronous rendering errors, with a mirrored HTML backup served when the source server fails.

Monitoring covers module‑level metrics (API request errors, timeouts, render duration) and page‑level checks (periodic CDN verification). Automated tests before release validate HTML standards, HTTPS upgrades, link validity, static resource integrity, JavaScript errors, pop‑ups, console usage, and memory usage.

5. Agile Measures

Detailed health checks record every request and render step, triggering alerts when API failures or long render times occur.

An Interface Hub centralizes data requests, allowing quick identification of problematic APIs and enabling environment switching for debugging.

A fast‑track channel lets engineers inject CSS or JS fixes within minutes for urgent issues, though it is used sparingly due to risk.

6. Summary

The article provides an overview of Taobao’s home page architecture, its migration from PHP to Node, performance and stability strategies, and the agile practices that keep the massive page reliable and fast.