HarmonyOS 鸿蒙Next web场景下的加载性能问题

HarmonyOS 鸿蒙Next web场景下的加载性能问题 概述
ArkWeb（方舟Web）是一个Web组件平台，旨在为应用程序提供展示Web页面内容的功能，并为开发者提供丰富的能力，包括页面加载、页面交互、页面调试等功能。在这个数字化时代，页面显示的速度直接体现了应用的流畅性，影响着用户对应用的印象和体验。快速加载并展示页面不仅可以吸引用户留在应用上，还能减少他们的等待时间和不耐烦情绪，从而提升用户的满意度。

Web页面的显示过程可以被分为多个阶段，包括DNS解析、建立连接、发送请求、接收响应、解析HTML、下载资源等步骤。在这个过程中，许多因素都会对页面显示速度产生影响，比如网络延迟、服务器响应时间、页面大小、资源压缩等。为了提升Web页面显示速度，开发者可以在Web页面加载、资源下载和页面渲染等方面进行优化，以提升性能和用户体验。

常见的优化方式。

• Web页面加载优化：Web页面加载速度对于用户体验至关重要，提高页面加载的速度可以直接提升应用的流畅性。
• JSBridge：通过JSBridge通信，可以解决ArkTS环境的冗余切换，避免造成UI阻塞。
• 同层渲染：通过将页面元素分层渲染，可以减少页面重绘和重排的次数，提高页面渲染效率。

ArkWeb（方舟Web）为开发者提供了优化页面显示速度的方法。通过采取这些优化方式，开发者可以改善应用程序的性能和用户体验，使用户能够更快速、更流畅地浏览Web页面，从而提升用户满意度和留存率。

Web页面加载流程

Web页面加载流程包括网络连接、资源下载（包括等待网络资源下载）、DOM解析、JavaScript代码编译执行、渲染等。页面加载中，比较关键的节点有网络连接、资源下载和完整的页面渲染，本文将主要对以下关键节点的耗时进行优化。

• 预启动Web渲染进程：预启动Web渲染进程指用户可以在业务需要的Web页面启动前，加载一个空白的Web组件，在至少一个Web组件存活时，Web渲染进程会一直存在，节省了用户后续启动Web组件拉起渲染进程的时间，加快页面加载速度。
• 预解析：预解析指预先对DNS进行解析，可以节省DNS解析的时间，从而优化Web的加载耗时。
• 预连接：预连接包含预解析的步骤，可以在用户请求页面之前提前进行DNS解析和socket连接建立，这样当用户真正请求页面时，服务器和浏览器之间已经建立好了连接，可以直接传输数据，减少了网络延迟，提升了页面加载速度。
• 预下载：预下载指在页面加载之前提前下载所需的资源，以避免在页面加载过程中资源下载导致的阻塞和耗时。通过预下载，可以在浏览器加载页面时，提前获取到所需的资源如图片、CSS文件、JavaScript文件等。通过提前下载这些资源，可以避免在页面加载时因为资源未加载完成而导致页面渲染延迟的情况发生。通过合理地使用预下载技术，用户在访问页面时可以更快地看到页面内容，提高整体性能，提升用户体验。
• 预渲染：预渲染指在后台对需要加载的页面进行预先渲染，提前完成整个页面加载的流程。当用户需要访问该页面时，可以直接切换至前台展示，实现页面“秒开”的效果。预渲染要求在进行DOM解析、JavaScript执行和页面渲染之前，已经完成了所需资源的下载工作，否则可能会导致页面内容不完整或者渲染错误的情况。通过预渲染，可以显著减少用户等待页面加载的时间，特别是对于一些需要加载大量资源或者有复杂交互的页面。
• 预取POST：预取POST指当即将加载的Web页面中存在POST请求且POST请求耗时较长时，可对POST请求进行预获取，消除等待POST请求数据下载完成的耗时，当用户真正发起POST请求时，进行拦截替换，加快页面加载速度，提高用户体验。
• 预编译JavaScript生成字节码缓存（Code Cache）：该方案会将使用到的JavaScript文件编译成字节码并缓存到本地，在页面首次加载时节省编译时间。
• 资源拦截替换的JavaScript生成字节码缓存（Code Cache）：该方案会将资源拦截替换场景下的JavaScript文件编译成字节码并缓存到本地，节省在页面非首次加载时的编译时间。
• 离线资源免拦截注入：在页面加载之前，离线资源免拦截注入会将需要使用的图片、样式表和脚本资源注入到内存缓存中，节省页面首次加载时的网络请求时间。
• 资源拦截替换加速：在原本的资源拦截替换接口基础上，资源拦截替换加速支持了ArrayBuffer格式的入参，开发者无需在应用侧进行ArrayBuffer到String格式的转换，可直接使用ArrayBuffer格式的数据进行拦截替换。

各优化方法具体的效果、代价和适用场景的对比如下表所示。

优化实践案例

案例一

问题描述

应用首页有web页面，点击底部tab加载非常慢，需要优化。

使用Profiler确认加载完成时延。

web初始化（H:NWebImpl | CreateNWeb）:

Web加载终点（最后一个SkiaOutputSurfaceImplOnGpu::SwapBuffers）：

加载耗时：4.3s

根因分析

• 初始加载时大量的CSS和JS加载。
• 加载了大量的图片、且图片之间的串行加载等待和下载非常耗时。

优化方案

1. 根据业务需求选择尝试合并与压缩JS与CSS文件，减少网络请求个数与大小，检查代码中是否有非必要首屏加载的CSS与JS文件，延后此类文件加载时机。
2. 优化页面组件加载图片的逻辑，页面显示范围有限但是一次性加载了大量的图片资源，确定业务逻辑上所有图片资源是否都需要首屏加载。
3. 其他通用优化方案。
   • 对网页进行预渲染提前拉起渲染进程。
   • 使用CDN内容分发加速静态资源请求（图片、脚本文件等）。
   • Web缓存（可优化200ms左右）此页面为模块详情页、页面布局的CSS和JS为固定样式页面HTML、CSS、JS可缓存本地，后续打开页面可缩短加载时延。

总结

由于是冷启动没有缓存时才会出现加载过慢，所以采用通用方案中a方案：

优化过程为：

1. 创建自定义ArkWeb组件：该ArkWeb组件被离线创建。
2. 创建并绑定NodeController：实现NodeController接口，用于自定义节点的创建、显示、更新等操作的管理。并将对应的NodeController对象放入到容器中，等待调用。
3. 绑定NodeContainer组件：将NodeContainer与NodeController进行绑定，实现动态组件页面显示。

预渲染优化原理图

说明

预渲染会消耗更多的内存、算力，仅建议针对高频页面使用，单应用后台创建的ArkWeb组件要求小于200个。

官方预渲染文档地址：https://developer.huawei.com/consumer/cn/doc/best-practices-V5/bpta-web-develop-optimization-V5#section172031338172719