How Dangdang Boosted Page Speed: Componentization, Lazy Loading, and Nginx Caching

Purpose of Page Performance Optimization

Slow page opening, delayed response, or pages that fail during promotions are usually caused by long first‑screen time, first‑packet time, and total download time, indicating poor stability and robustness.

Overall Design

Componentization

Data generation mechanism optimization

Data loading optimization

Componentization

Componentization is a core feature of the marketplace, enabling full reuse of modules, reducing development cost, improving flexibility, and enhancing robustness. Atomic components (product, image, text) are combined into simple components via layout, allowing automatic generation of pages. Limitations include UI constraints, special component development, and deeper DOM hierarchies.

Data Generation Optimization

Backend jobs proactively generate module data, reducing request latency and ensuring page stability. Invalid data is replaced by the previous version to maintain robustness.

Data Loading Optimization

Non‑first‑screen modules are loaded asynchronously via AJAX, decreasing page size and improving load speed. Monitoring shows stable performance curves with first‑screen time consistently under 3 seconds.

HTML Page Optimizations

Textarea lazy rendering: defer non‑critical HTML in textareas to reduce DOM nodes on first paint.

Image lazy loading: load only visible images, using a jQuery plugin.

JS handling: compress JavaScript, place scripts at the end of the body to avoid blocking rendering.

Network Optimizations

Multi‑domain service: distribute image requests across multiple domains to increase parallel downloads.

DNS prefetch: use link rel="dns-prefetch" to resolve domains early.

URL merging: manually combine common external resources or use nginx-http-concat for automatic merging.

CDN service: deliver static resources from the nearest node.

GZIP compression: enable server‑side GZIP to reduce payload size.

Server Optimizations

Opcode cache: APC for PHP.

Memory data cache: Memcache or Redis to reduce database/API latency.

Disk file cache: Nginx fastcgi_cache and proxy_cache configurations.

Fastcgi cache configuration example:

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;

Cache can be purged manually via ngx_cache_purge or custom scripts.

Concurrency Strategy

When a page requires multiple API calls, synchronous requests cause long load times. Asynchronous handling can be done on the server using PHP curl_multi_* functions or on the client via AJAX. Example PHP async implementation:

$queue = curl_multi_init();
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $params);
curl_setopt($ch, CURLOPT_TIMEOUT, $delay);
curl_multi_add_handle($queue, $ch);
while (($code = curl_multi_exec($queue, $active)) == CURLM_CALL_MULTI_PERFORM);
while ($done = curl_multi_info_read($queue)) { /* handle result */ }
curl_multi_close($queue);

An interface iMultiCurl abstracts request details, allowing developers to implement specific handlers without dealing with low‑level curl calls.

Q&A

Questions cover browser cache versioning, static resource CDN handling, use of BigPipe, performance monitoring via internal platforms and third‑party services like Tingyun, and error monitoring.