Optimizing H5 Resources and JsBridge in News Client

H5's cross-platform and real-time update features make it a key content carrier in apps, but web limitations cause performance gaps with native. This article shares optimization practices in the NetEase News client for resource offline, JsBridge communication, and interface pre-request.

一、资源离线

1、介绍

Web page performance optimization focuses on static resource loading time. Traditional offline solutions can't solve the first load problem. In the app, we can use native to store resources offline, solving this defect. The basic idea is to generate a Zip package of web page static resources, pull the Zip package to local, decompress and persist it. When accessing, intercept WebView requests and return local files directly.

2、离线实现

Implementing the Zip offline solution involves three parts: Web page Zip package generation tool, offline management system, and client offline implementation.

2.1、Web 页面 zip 包生成工具

2.1.1、工具介绍

The tool generates Zip packages for web pages, including page name, URL, and local entry file or online address. Output includes name, URL, zip URL, and MD5.

2.1.2、工具实现

The tool uses middleware for automation, including copy packaging, package integrity check, version generation, and MD5 acquisition. Common and custom parts handle different scenarios.

2.1.3、生成的 Zip 包

Zip packages contain page entry files and dependencies, with a specific directory structure matching the online version.

2.2、离线管理系统

The system stores and manages offline data, provides offline data to the app, and allows online management of offline data.

2.3、客户端离线实现

Implementation involves resource update and request interception. The offline resource manager handles updates and returns. Intercepting page files and static resources uses local directories.

3、小结

Zip offline solves first load issues, improving performance by 75% in various networks.

二、JsBridge

虽然随着 WebView 的逐步更新，赋予了 web 丰富的功能，但考虑到兼容性以及整个 APP 交互体验的统一，大部分的业务场景下我们仍需要借助 native 的功能。

1、介绍

JsBridge handles web and native communication. Methods include iOS UIWebView JavaScriptCore, iOS WKWebView WKScriptMessageHandler, Android addJavascriptInterface (4.2+), URL interception, and JS method interception (alert, prompt, confirm, console.log).

2、重构前状态

Before refactoring, communication was chaotic with various protocols and global methods. The new design uses a symmetric approach with two channels (invoke and receive) and four capabilities (invoke, receive, register, callback).

3、重构思路

Messages use a unique ID for asynchronous alignment. The data structure includes name, params, callbackId, responseId, result, errorMsg, and errorData.

3.2、消息通道

Web to native uses iOS WKScriptMessageHandler and Android addJavascriptInterface (4.2+) or URLScheme. Native to web uses web-exposed methods.

3.3、数据结构

The message structure includes name, params, callbackId, responseId, result, errorMsg, and errorData.

3.4、可用性

JsBridge is available in any page section. API availability is checked via a namespace injection.

3.5、命名空间

Namespaces allow separating generic and custom APIs.

3.6、具体实现

Web implementation uses Promise to handle asynchronous operations.

4、小结

JsBridge design is straightforward, focusing on message passing and handling compatibility issues.

四、实际应用

Optimization includes resource offline, JsBridge, and pre-request. Performance improved by 50% with pre-request.

1、请求代理

Request protocol allows pre-request, unified header, unified logging, and cross-domain.

2、WebView 预创建

WebView pool creates ready instances for immediate use.

3、性能对比

Performance improved from 942.9ms to 391.1ms with offline and pre-request.

4、线上实例

Video shows reduced white screen time with offline and pre-request.

五、结语

Hybrid apps remain relevant with optimizations like resource offline and pre-request.