Performance Optimization of the Tongtian Tower H5 Platform: Frontend and Node Middleware Improvements

The Tongtian Tower is an internal JD platform for quickly building activity pages; as templates and features grew, front‑end first‑screen load time (TP75) exceeded 2 seconds and Node middleware QPS was low. In the second half of 2019 a comprehensive performance analysis and optimization were undertaken.

Built on React SSR, the H5 page renders the first screen on a Node middle layer, with subsequent async requests handled by the client. Static assets are served via CDN.

After optimization, first‑screen TP75 dropped from 2.47 s to 1.58 s (≈36% improvement) and CPU usage on the server fell from 29.5% to 20.5% (≈30% reduction).

Online Performance Analysis used Performance API, Chrome DevTools, and v8‑profiler. A custom front‑end measurement module reports data to a visual platform.

Node profiling routes were added:

const profiler = require('v8-profiler');
router.get('/profiler/start', (req, res) => {
  // Start profiling
  profiler.startProfiling('CPU profile');
  res.end('profile start');
});
router.get('/profiler/end', (req, res) => {
  const profile = profiler.stopProfiling();
  profile.export()
    .pipe(res)
    .on('finish', () => {
      profile.delete();
      res.end();
    });
});

Load testing with

ab -c 10 -n 1000 http://localhost:7001/mall/active/xxx/index.html

demonstrated the impact of the profiling endpoints.

General Front‑end Optimizations followed the "High‑Performance Website Guide": reducing HTTP requests, leveraging CDN, minimizing CSS/JS size, enabling gzip, and shrinking image payloads. An image‑resize helper was introduced:

const isJfsRegex = /360buyimg\.com\/.*\/((s([\d^_]+)x([\d^_]+)_)?jfs)/i;
export function resizeImg(url, rect) {
  const dpr = window.devicePixelRatio;
  if (!isJpegRegExp.test(url)) return url;
  const result = url.match(isJfsRegex);
  if (!result) return url;
  if (result[3] && result[4]) {
    if (!rect || (!rect.width && !rect.height)) return url;
    if (rect.width && !rect.height) rect.height = rect.width / result[3] * result[4];
    if (rect.height && !rect.width) rect.width = rect.height / result[4] * result[3];
    const t = 's' + Math.ceil(rect.width * dpr) + 'x' + Math.ceil(rect.height * dpr) + '_jfs';
    return url.replace(result[1], t);
  } else {
    if (rect && rect.width && rect.height) {
      return url.replace('/jfs/', `/s${Math.ceil(rect.width * dpr)}x${Math.ceil(rect.height * dpr)}_jfs/`);
    }
  }
  return url;
}

CI‑based webpack bundling ensured consistent content‑hash filenames, maximizing CDN cache hit rates.

Webpack Bundle Refactor introduced separate bundles for low‑frequency templates, stable "mute" code, and on‑demand loading, reducing overall CSS/JS payloads and improving cache stability.

Business‑Specific Optimizations included precise first‑screen rendering: the Node layer calculates floor heights based on device dimensions, discarding excess floors beyond two screens, thus cutting unnecessary rendering and data transfer.

Additional steps: pre‑loading first‑screen images by marking them and bypassing lazy‑load, and converting tab switches to incremental rendering to avoid full re‑renders.

The optimization effort yielded >30% overall performance improvement and demonstrated that combining generic front‑end techniques with business‑aware strategies can substantially enhance user experience.