HarmonyOS Web开发性能优化指导

一、概述

在移动互联网时代，应用的页面渲染速度对于用户体验至关重要。相对于原生页面，Web页面的性能存在多方面的技术挑战。本文以HarmonyOS的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格式的数据进行拦截替换。