Optimizing Time‑to‑Interactive (TTI) in the Qunar Travel App: JSBundle Loading, Rendering, and Service Request Strategies

The Qunar travel app serves as the main entry for user traffic, so its performance directly impacts conversion rates; the team therefore created a unified, data‑driven User Experience Digital (QDD) platform that measures smoothness, stability, and energy consumption for each page.

Among the measured indicators, Time‑to‑Interactive (TTI) is the most critical. QDD defines TTI from the moment a route change starts until the page has fetched valid data, rendered, and become fully interactive, including the loading and parsing of React Native QP resource bundles.

To improve TTI, three major directions were pursued: accelerating JSBundle loading, speeding up page rendering, and optimizing service requests.

JSBundle loading acceleration involved three tactics: (1) pre‑loading bundles at appropriate moments without affecting other user experiences; (2) slimming bundles by removing dead code, compressing images (JPEG/WEBP instead of PNG), replacing large libraries (e.g., using dayjs instead of moment.js ), and adopting the qrn‑es6 compilation output, which can shrink bundle size by up to 14%; (3) splitting bundles into a small framework package and multiple business packages, then further dividing business packages into RamBundles (main and sub‑packages) that load on‑demand, yielding a 10‑15% TTI reduction.

Page‑rendering stage optimization focused on two techniques: (a) page pre‑loading, where the JSBundle for a target RN page is loaded in advance and the page is registered via AppRegistry.registerComponent before user navigation; (b) deferring non‑core view rendering, which prioritizes critical DOM updates and delays less important components, achieving an additional 10% TTI improvement.

Service‑request optimization addressed both latency reduction and pre‑fetching. Backend teams shortened API call chains, cutting hotel‑quote request time by ~150 ms, while a pre‑request mechanism proactively fetched data for the next page and cached it, effectively eliminating network latency from the subsequent TTI.

The combined impact of these three optimizations is summarized in the table below, showing average TTI reductions of 13% (JSBundle), 15% (rendering), and 11% (service requests). After six months of continuous effort, the overall TTI metrics across the app have improved markedly, and the team plans to sustain performance stability as the product scales.