Progressive Front-End Rendering: Route Separation, Pre‑Static Generation, and WebView Pre‑Creation for H5 Performance Optimization

The article, originally from Baidu Live R&D, presents a progressive enhancement solution for Web H5 page rendering, replacing traditional template‑synchronous rendering with a combination of route separation , pre‑static generation , and WebView pre‑creation . The goal is to improve first‑paint performance, reduce user‑perceived latency, and increase overall traffic.

Background : Modern Web Apps average 1.6 MB, and users are highly sensitive to load time. The legacy flow renders a page by server‑side Smarty template injection of JSON data, then executes JavaScript in the browser to paint the UI, causing high TTFB and JavaScript execution delays.

Key objectives :

Optimize H5 first‑screen experience (FCP, First Paint).

Accelerate the demand‑to‑delivery loop by decoupling routing from data APIs.

Build reusable front‑end infrastructure to support multiple product lines.

Solution architecture :

1. Route Separation – URLs are assigned by the front‑end instead of the server. A deterministic mapping between URL and source directory is defined, allowing developers to control entry points and reducing backend‑frontend coordination overhead. NGINX serves pre‑static HTML directly, eliminating template compilation at request time.

2. Pre‑Static Generation – During the build, a custom Webpack plugin (based on ReactDOMServer) renders selected routes to static HTML. The plugin hooks into html-webpack-plugin (beforeAssetTagGeneration and afterTemplateExecution) to inject the rendered markup. Example entry export:

module.exports = (locals) =>
  Promise.resolve(locals.preRender({ id: containerId, main: App }));

Static pages are served instantly, reducing white‑screen time and server resource consumption while still allowing search‑engine indexing.

3. Component Skeletons – Dynamic components display a skeleton UI while awaiting AJAX data. Example skeleton loader:

import ContentLoader from 'react-content-loader';
const GrowthCardLoader = props => (
);
// Usage
{window.isPreRender ?
:
}

4. WebView Pre‑Creation – At app startup, a pool of pre‑initialized WebView instances is created. Combined with pre‑static HTML, this eliminates the WebView initialization delay, achieving near‑zero white‑screen loads.

Performance comparison – Tables and screenshots (omitted here) show that the new flow dramatically reduces TTFB and JavaScript execution time, with the custom pre‑static plugin outperforming alternatives such as react‑snap, prerender‑spa‑plugin, and snapshotify.

Benefits :

Fast, deterministic URL routing reduces maintenance cost.

Pre‑static HTML improves first‑paint speed and lowers cloud infrastructure cost.

Skeleton screens guarantee a smooth user experience during data fetching.

Engineering‑level tooling (Webpack plugin) integrates seamlessly without adding extra build steps.

Engineering perspective – The approach treats front‑end development as software engineering, emphasizing performance, stability, maintainability, and collaborative workflow across teams.

Conclusion – H5 performance optimization requires top‑level design, engineering management, and cultural innovation. The presented “route separation + pre‑static + WebView pre‑creation” framework delivers measurable speed gains, reduces operational overhead, and provides a scalable foundation for future front‑end projects.