7-4.【WebView】你说如何优化 WebView 首屏加载速度？是否支持预热？如何减少 DNS / SSL 握手耗时？

1. WebView 预热机制 (Native 预热)

在用户点击进入 Web 页面之前，提前初始化 Web 引擎是减少白屏时间最有效的手段。

准备渲染上下文：

使用 prepareRenderContext() 提前启动渲染进程。这样当 Web 组件挂载时，内核已经就绪。

TypeScript

import web_webview from '@ohos.web.webview';
// 在应用启动或进入列表页时提前调用
web_webview.WebviewController.prepareRenderContext();

预创建控制器：

提前在内存中创建一个 WebviewController 实例并进行 setWebSrc 操作，甚至可以创建一个隐藏的 Web 组件进行预渲染。

网络建连（DNS 解析 + TCP 握手 + SSL 协商）通常占据首屏耗时的 30% 以上。

DNS 预解析 (DNS Pre-fetch) ：

在 HTML 中使用 <link rel="dns-prefetch" href="//example.com">，或者在原生侧调用系统 API 提前解析域名。

预连接 (Pre-connect) ：

使用 web_webview.WebviewController.initializeWebEngine() 并配合预连接策略，提前完成 Socket 握手。

TypeScript

// 提前与服务器建立连接，完成 SSL 握手
web_webview.WebviewController.prefetchResource({
  url: 'https://example.com',
  method: 'GET'
});

最快的网络请求就是“不发请求”。

原生资源拦截 (WebResourceProxy) ：

通过 onInterceptRequest 接口，拦截网页对公共库（如 React, Vue, jQuery）或静态资源（图片、CSS）的请求，直接从应用的 rawfile 中返回本地资源。
- 优点：跳过网络，瞬间加载。
- 缺点：需要维护本地资源版本与线上一致。

如果你能预测用户的下一个路径（例如点击列表进入详情页），可以创建一个隐藏的 WebView 提前加载详情页。当用户点击时，直接通过组件切换将其显示，实现“秒开”。

关闭不必要的特性以减轻内核负担：

优化 WebView 的黄金法则： “提前做” （预热、预连）、 “拿掉做” （拦截资源）以及**“隐形做”**（后台加载）。