HarmonyOS 鸿蒙Next:提升复杂H5套壳App启动速度,避免白屏方案
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启动速度慢及白屏问题,可通过以下方案优化:
- 预加载技术:利用鸿蒙NEXT的预加载特性,将H5资源在应用安装时提前缓存至本地,减少加载时间,避免白屏。
- 优化H5页面:减少H5页面的体积和复杂度,优化代码和图片资源,加快页面渲染速度。
- 使用加载提示:在H5页面加载过程中显示加载进度或加载动画,提升用户体验。
- 网络优化:确保网络连接稳定,优化网络请求和响应,减少因网络延迟导致的白屏。
如果问题依旧没法解决,请加我微信,我的微信是itying888。