HarmonyOS 鸿蒙Next:提升复杂H5套壳App启动速度,避免白屏方案

发布于 1周前 作者 caililin 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next:提升复杂H5套壳App启动速度,避免白屏方案

App嵌套H5,主页面的展示逻辑如下图所示,

build() {  
    Stack() {  
        // 加载中的loading  
        if (this.isLoading) {  
            LoadingProgress()  
                .color(Color.Grey)  
                .width(50)  
                .height(50)  
                .zIndex(2);  
        }  
  
        Web({  
            src: Constants.MAIN_PAGE_URL,  
            controller: this.webController  
        })  
            .width("100%")  
            .height("100%")  
            .domStorageAccess(true)  
            .onlineImageAccess(true)  
            .imageAccess(true)  
            .zoomAccess(false)  
            .javaScriptAccess(true)  
            .darkMode(this.mode)  
            .cacheMode(this.cacheMode)  
            .javaScriptProxy({  
                object: this.jsBridge,  
                name: "native",  
                methodList: ["exec"],  
                controller: this.webController,  
            })  
            .onOverrideUrlLoading((webResourceRequest: WebResourceRequest) => {  
                console.info("onOverrideUrlLoading url : ", webResourceRequest.getRequestUrl());  
                // console.info("TIME_STAMP08 : ", systemDateTime.getTime(false) + "");  
                return false;  
            })  
            .onAppear(() => {  
                this.isLoading = true;  
                console.info("TIME_STAMP04 : ", systemDateTime.getTime(false) + "");  
            })  
            .onPageBegin(() => {  
                console.info("TIME_STAMP05 : ", systemDateTime.getTime(false) + "");  
                // 网页开始加载时触发该回调  
            })  
            .onProgressChange((event) => {  
                if (event) {  
                    this.curProgress = event.newProgress;  
                    if (this.curProgress === 100) {  
                        // this.isLoading = false;  
                        console.log("TIME_STAMP ", systemDateTime.getTime(false) + "", "current progress:" + this.curProgress);  
                    }  
                }  
            })  
            .onPageEnd(() => {  
                console.info("TIME_STAMP06 : ", systemDateTime.getTime(false) + "");  
            })  
            .onPageVisible((event) => {  
                this.isLoading = false;  
                console.info("TIME_STAMP07 : ", systemDateTime.getTime(false) + " ", event.url);  
            });  
    }  
}

为了提升用户体验,在主页面添加了loading,但是从loading结束到H5页面完全显示,有短暂白屏,有没有比较好的优化方案?

关于应用冷启动过程速度较慢的问题,除了提前初始化arkweb组件、url预连接,还有没有比较好的方案?

6 回复
加个loading页面,web未加载成功前显示loading页面

你看看代码,loading已经加过了,onPageVisible的时候关闭,依然有白屏

LoadingProgress 只是个组件, 写个页面,宽高100%,url加载成功后隐藏loading页面,显示web组件

还是在onPageVisible触发的时候隐藏loading页面?
这样的话和loading组件有啥区别吗,显示和隐藏的触发时机不变?

可以基于资源预加载的H5优化解决

通过客户端将前端资源提前下载到本地,并基于请求拦截实现资源的快速响应,提升H5首次加载的体验。

针对HarmonyOS 鸿蒙Next中复杂H5套壳App启动速度慢及白屏问题,可通过以下方案优化:

  1. 预加载技术:利用鸿蒙NEXT的预加载特性,将H5资源在应用安装时提前缓存至本地,减少加载时间,避免白屏。
  2. 优化H5页面:减少H5页面的体积和复杂度,优化代码和图片资源,加快页面渲染速度。
  3. 使用加载提示:在H5页面加载过程中显示加载进度或加载动画,提升用户体验。
  4. 网络优化:确保网络连接稳定,优化网络请求和响应,减少因网络延迟导致的白屏。

如果问题依旧没法解决,请加我微信,我的微信是itying888。

回到顶部