HarmonyOSWeb场景性能优化指导鸿蒙开发者社区

二、Web页面加载性能优化指导（一）Web页面加载流程Web页面加载包含网络连接、资源下载、DOM解析、JavaScript代码编译执行和渲染等关键环节，本文主要针对网络连接、资源下载和完整页面渲染这些关键节点的耗时进行优化。

预连接：预连接包含预解析的步骤，可以在用户请求页面之前提前进行DNS解析和socket连接建立，这样当用户真正请求页面时，服务器和浏览器之间已经建立好了连接，可以直接传输数据，减少了网络延迟，提升了页面加载速度。

预下载：预下载指在页面加载之前提前下载所需的资源，以避免在页面加载过程中资源下载导致的阻塞和耗时。通过预下载，可以在浏览器加载页面时，提前获取到所需的资源如图片、CSS文件、JavaScript文件等。通过提前下载这些资源，可以避免在页面加载时因为资源未加载完成而导致页面渲染延迟的情况发生。通过合理地使用预下载技术，用户在访问页面时可以更快地看到页面内容，提高整体性能，提升用户体验。

预取POST：预取POST指当即将加载的Web页面中存在POST请求且POST请求耗时较长时，可对POST请求进行预获取，消除等待POST请求数据下载完成的耗时，当用户真正发起POST请求时，进行拦截替换，加快页面加载速度，提高用户体验。

（三）预解析和预连接优化原理介绍如下图所示，在应用启动和UIAbility的onCreate生命周期后，Web组件才能进行初始化和运行。在ArkWeb组件运行阶段，会经过onAppear、load、onPageBegin、onPageEnd步骤。预解析、预连接优化适用于Web页面启动和跳转场景，例如，应用启动时需要加载Web首页。当开发者已经创建一个ArkWeb组件的实例后，可以选择不同时机对当前ArkWeb组件设置URL并进行预解析、预连接：

（五）预渲染优化原理介绍

预渲染优化适用于Web页面启动和跳转场景，例如，进入首页后，跳转到其他子页。与预连接、预下载不同的是，预渲染需要开发者额外创建一个新的ArkWeb组件，并在后台对其进行预渲染，此时该组件并不会立刻挂载到组件树上，即不会对用户呈现(组件状态为Hidden和InActive)，开发者可以在后续使用中按需动态挂载。

具体原理如下图所示，首先需要定义一个自定义组件封装ArkWeb组件，该ArkWeb组件被离线创建，被包含在一个无状态的节点NodeContainer中，并与相应的NodeController绑定。该ArkWeb组件在后台完成预渲染后，在需要展示该ArkWeb组件时，再通过NodeController将其挂载到ViewTree的NodeContainer中，即通过NodeController绑定到对应的NodeContainer组件。预渲染通用实现的步骤如下：

如果是应用首页，推荐在ArkWeb组件创建后或者提前初始化Web内核后，对首页的POST请求进行预取，如XComponent.onCreate()、自定义组件的生命周期函数aboutToAppear()。当前页面完成加载后，可以对用户下一步可能点击页面的POST请求进行预取，推荐在Web组件的生命周期函数onPageEnd()及后续时机进行。（七）预编译JavaScript生成字节码缓存（CodeCache）原理介绍

开发者需要创建一个无需渲染的离线Web组件，用于进行预编译，在预编译结束后使用其他Web组件加载对应的业务网页。

（八）资源拦截替换的JavaScript生成字节码缓存（CodeCache）原理介绍

开发者首先需要在Web组件运行前，向Web组件注册自定义协议。

其次需要拦截自定义协议的JavaScript，设置ResponseData和ResponseDataID。

（九）离线资源免拦截注入原理介绍

说明

开发者需创建一个无需渲染的离线Web组件，用于将资源注入到内存缓存中，使用其他Web组件加载对应的业务网页。仅使用HTTP或HTTPS协议请求的资源可被注入进内存缓存。内存缓存中的资源由内核自动管理，当注入的资源过多导致内存压力过大，内核自动释放未使用的资源，应避免注入大量资源到内存缓存中。正常情况下，资源的有效期由提供的Cache-Control或Expires响应头控制其有效期，默认的有效期为86400秒，即1天。资源的MIMEType通过提供的参数中的Content-Type响应头配置，Content-Type需符合标准，否则无法正常使用，MODULE_JS必须提供有效的MIMEType，其他类型可不提供。仅支持通过HTML中的标签加载。如果业务网页中的script标签使用了crossorigin属性，则必须在接口的responseHeaders参数中设置Cross-Origin响应头的值为anoymous或use-credentials。当调用webview.WebviewController.SetRenderProcessMode(web_webview.RenderProcessMode.MULTIPLE)接口后，应用会启动多渲染进程模式，此方案在此场景下不会生效。单次调用最大支持注入30个资源，单个资源最大支持10Mb。（十）资源拦截替换加速原理介绍

资源拦截替换加速在原本的资源拦截替换接口基础上新增支持了ArrayBuffer格式的入参，开发者无需在应用侧进行ArrayBuffer到String格式的转换，可直接使用ArrayBuffer格式的数据进行拦截替换。

文中提供了预连接、预下载、预渲染、预取POST、预编译等多种常见的优化方法，指导开发者优化Web页面的加载速度。这些方法可以有效提高应用流畅度、提升用户体验。