How JDHybrid Offline Loading Supercharges Mobile App Performance

Background

Hybrid technology combines native capabilities with low‑cost, cross‑platform H5 features, but H5 page loading suffers from multiple HTTP requests, large resources, and network latency. Pre‑loading static assets (images, JS, CSS, HTML) to local storage dramatically speeds up first‑screen rendering, especially under poor network conditions or high‑traffic promotions.

618 Promotion Results

During the 618 sales event, JDHybrid was used across main venues, interactive pages, flash sales, and subsidy sections, achieving over 30% faster first‑screen load, 20% higher instant‑open rate, and more than 60% reduction in page errors.

Offline Loading Mechanisms

Android

Two approaches are available:

Direct file loading via webview.loadUrl(XCache.getApp(id).getHtmlPath()). This is fast but suffers from missing domain, cookie loss, CORS issues, and scheme mismatches.

Request interception using shouldInterceptRequest to return a WebResourceResponse. This avoids the drawbacks of direct loading and is widely adopted.

Key considerations for WebResourceResponse include correct MIME type (e.g., "text/html"), proper encoding, and handling of CORS headers such as access-control-allow-origin and timing-allow-origin.

iOS

Four solutions were explored:

Direct file loading with loadFileURL:allowingReadAccessToURL: – similar limitations to Android.

LocalServer using libraries like CocoaHTTPServer, GCDWebServer, or Telegraph to simulate HTTP and serve local resources.

NSURLProtocol – intercepts requests but requires private API registration and introduces body‑loss for POST, global impact, and App Store review risks.

WKURLSchemeHandler (iOS 11+). By registering a custom scheme handler (hooking WKWebView handlesURLScheme: to allow http/https), it provides per‑WebView interception, better isolation, and avoids many global side effects.

Implementation details include constructing WebResourceResponse, handling missing request bodies, managing cookies across UIProcess, NetworkProcess, and WebContentProcess, and dealing with redirects, which WKURLSchemeHandler does not natively support.

JDHybrid Offline Package Practice

Resources are split into business packages (JS, CSS, images) and a shared common package. The package structure mirrors the original H5 layout.

Package Generation

Initially, developers uploaded H5 assets to two platforms to keep them identical. An optimized workflow now extracts resource URLs from a live page, ranks them by first‑screen importance, and lets teams select assets via a UI. A CLI tool can also generate packages automatically.

Download Tiering

Packages are classified as T‑level (download on app start or background switch for high‑traffic pages), S‑level (download after home page render), and A‑level (download on specific page entry). Priority is calculated as finalWeight = configWeight + localWeight(LRU), with safeguards for thread count and CPU usage.

Diff Packages

BSdiff is used; the server provides URLs in the form https://storage.360buyimg.com/hybrid/xxxxx.zip_2_1 where the suffix encodes server and client versions.

Automatic Gray Release

Based on business‑selected ratios, the system releases updates in equal intervals (e.g., every 5 minutes for a 1‑hour full rollout).

Resource Matching & Real‑Time Updates

A mapping file inside the package links original URLs to local filenames, handling scheme differences, image quality suffixes, and domain sharding. Matching logic ignores scheme, strips "!webp" suffixes, and can ignore hostnames.

Pre‑Loading Strategies

HTML Pre‑Loading

HTML requests are issued as early as possible; when intercepted, the cached HTML is returned immediately, reducing idle time before rendering.

Interface Pre‑Loading

Native initiates API calls ahead of WebView rendering, caches responses, and returns them via a JS bridge. Configurable parameters include fixed business fields, device/user info, and dynamic query values. During 618, this improved API latency by over 50%.

Memory Warm‑Up

On page creation, a background thread loads package assets into an LRU‑based memory cache, falling back to disk only when missing. High‑traffic interactive pages can pre‑scan resources after home render.

Debugging & Monitoring Tools

A lightweight UI shows offline‑package hit rate, first‑contentful‑paint (FCP), page‑init to finish duration, and pre‑load effectiveness. Detailed logs include package version, hit resources, and performance metrics.

Performance monitoring captures native timestamps (initStart, loadUrl, pageStart, pageCommit, colorRequestStart/End, pageFinish) and JavaScript metrics (PerformanceTiming, FP, FCP, LCP, resource timings) via a JS bridge annotated with @JavascriptInterface. Cookie synchronization is handled through WKHTTPCookieStore and UIProcess updates.

Open‑Source Plan

The core components—offline package handling, request interception, pre‑loading, and monitoring—will be open‑sourced on GitHub later this year, inviting community contributions.