Detail Page Localization for Faster Frontend Rendering in Mobile News Feeds
This article explains how a mobile news‑feed application reduces first‑paint latency from 820 ms to 260 ms by pre‑fetching static templates and news data, inlining resources, and using a localized detail‑page strategy that works offline and mitigates WebView cross‑origin issues.
The article, originally published in the Qiwu Weekly by front‑end engineer Li Zheming, describes performance optimization for an infinite‑scroll news feed where the list is native but the detail page is built with H5, demanding minimal white‑screen time for a smooth reading experience.
It first reviews rendering approaches—backend rendering, front‑end rendering, and SSR—explaining why the project ultimately adopted pure JavaScript front‑end rendering. The resulting performance problems stem from network latency for data requests and JS resource loading, which were mitigated by injecting data into a global variable on the server side and caching resources in localStorage .
Further bottlenecks identified include the initial download of front‑end resources after a code update, server TTFB, and WebView launch speed. The proposed solution, called “detail‑page localization,” pre‑downloads both the static HTML template and the associated news data, cutting average first‑paint time from 820 ms to 260 ms and enabling offline reading.
Implementation details :
The detail page consists of news data plus a static page .
When the list API is called, the server returns the template URL and the JSON data for each article.
The client downloads the template in advance and stores all static assets inline within the HTML.
At runtime, the client injects the news data into the page via a global variable named __INJECT_DATA_FROM_CLIENT_DONT_MODIFY__ and renders the combined page.
详情页 = 静态页面 + 新闻数据
All static resources are marked with an inline attribute; the build tool replaces them with their content during compilation. The template is deliberately truncated (no opening <html> ) to leave a placeholder for data injection.
For page updates, the server includes a version field in the API response. A post‑publish hook increments this version, and the client re‑downloads the template when it detects a newer version.
Cross‑origin considerations :
WebView can load local pages via loadUrl , loadData , or loadDataWithBaseURL .
The chosen method is loadDataWithBaseURL , which allows setting a realistic base URL so that cookies and localStorage behave like in the online environment.
If the page uses history.pushState() , the URL may revert to about:blank ; therefore the historyUrl parameter must also be supplied.
The postscript notes additional safeguards such as MD5 verification of downloaded templates, fallback to the online version when content changes, and a cloud‑controlled rollback mechanism to ensure reliability.
360 Tech Engineering
Official tech channel of 360, building the most professional technology aggregation platform for the brand.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.