Dangdang Marketplace Page Performance Optimization Practices and Results

The talk begins by defining page performance goals, emphasizing metrics such as first‑screen time, first‑byte time, and total download time, and explains why the Dangdang marketplace—hosting homepage, category pages, shop pages, rankings, topics, and promotions—needs robust, fast, and stable delivery.

Overall Design focuses on three pillars: componentization, data generation mechanism optimization, and data loading optimization.

1. Componentization enables reusable UI modules, reduces development cost, improves page robustness, and facilitates on‑demand loading. Atomic components (product, image, text) are combined into simple components via layout divs, allowing most pages to be assembled automatically.

2. Data Generation Mechanism Optimization moves data creation to backend jobs, reducing request latency and ensuring page stability by falling back to previous versions when data is invalid.

3. Data Loading Optimization introduces asynchronous loading of non‑first‑screen modules via AJAX, dramatically shrinking page size and keeping first‑screen time under three seconds.

HTML Page Optimizations include textarea delayed rendering, image lazy loading (using a jQuery plugin), JavaScript compression, and moving scripts to the page footer to avoid blocking rendering.

Network Optimizations cover multi‑domain services to increase parallel connections, DNS prefetch via <link rel="dns-prefetch" href="//example.com"> , URL concatenation (manual or using nginx‑http‑concat ), CDN usage, and GZIP compression.

Server‑Side Optimizations discuss multi‑level caching: code‑level APC for PHP, memory caches (memcache/redis) to cut database/API calls, and disk caching with Nginx fastcgi_cache.

Nginx FastCGI Cache Configuration (modify nginx.conf ): fastcgi_temp_path /data/fastcgi/tmp; fastcgi_cache_path /data/fastcgi/cache levels=1:2 keys_zone=one:100m inactive=3m max_size=1g; fastcgi_cache one; fastcgi_cache_valid 200 302 3m; fastcgi_cache_key $request_method$request_uri;

Manual Cache Purge can be done via the third‑party module ngx_cache_purge or a simple custom script.

Concurrent API Handling Strategy proposes three options for pages with multiple API calls, recommending a server‑side asynchronous approach using PHP's curl_multi_* functions. Example code:

$queue = curl_multi_init();

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);

curl_setopt($ch, CURLOPT_POST, 1); // if POST

curl_setopt($ch, CURLOPT_POSTFIELDS, $params);

curl_setopt($ch, CURLOPT_TIMEOUT, $delay);

curl_multi_add_handle($queue, $ch);

$map[(string)$ch] = $request;

do { while (($code = curl_multi_exec($queue, $active)) == CURLM_CALL_MULTI_PERFORM); if ($code == CURLM_OK) { break; } } while ($active);

curl_multi_close($queue);

To encapsulate this logic, an interface iMultiCurl is defined with methods get_url() , get_method() , get_params() , callback() , and load() . An example implementation accountDataHandler shows how a concrete class can fulfill the interface.

The presentation concludes that performance optimization is an ongoing, multi‑layered effort; even small changes can yield significant gains. Measured results from a large promotion show CPU usage dropping from ~95% to ~30% after adding servers, and further down to <5% after enabling fastcgi_cache, demonstrating the effectiveness of the combined optimizations.