QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

Get 这个秘籍,告别鸿蒙原生应用页面滑动白块 / 白屏困扰

  • 2025-03-06
    北京
  • 本文字数:1598 字

    阅读完需:约 5 分钟

Get这个秘籍,告别鸿蒙原生应用页面滑动白块/白屏困扰

在鸿蒙应用开发中,部分应用页面在滑动时会出现白块或白屏的问题,不仅困扰开发者,还直接影响用户体验。针对这一痛点,华为近期分别推出了针对鸿蒙原生应用 ArkUI 页面及 Web 页面的滑动白块与白屏问题的解决方案,通过创新技术手段解决不同技术栈下的性能瓶颈,为开发者提供更流畅的页面渲染体验,有效提升鸿蒙应用的页面滑动流畅度。

 

ArkUI 页面动态预加载:兼顾应用首页速度与滑动流畅性

在 ArkUI 页面中,滑动时出现白块现象是开发者常遇到的技术难题,且大多数情况在使用 imageKnife 后仍存在相应问题。传统的优化方式主要依赖于增加 cachedCount 缓存数量,但这一方法往往带来新的问题,例如首页白屏或内存占用增加,影响整体体验。为了解决这一痛点,华为提供了一种基于动态预加载的方案,通过将 LazyForEach+ImageKnife 和 Repeat+ImageKnife 两种技术组合,精准优化页面渲染过程。这一方案不仅能有效避免 ImageKnife 导致的图片加载延迟问题,同时还能缩短 LazyForEach 的首屏加载时间,为开发者带来更优的页面加载体验,同时提升用户的视觉流畅度。

 

该方案通过实现 Prefetcher 接口监听数据项的变化,动态控制资源的下载与取消,并结合 ImageKnife 三方库实现具体的预取和缓存管理。这种动态预加载策略突破了以往解决方案的局限性,提供了一种更加智能、高效的页面优化方式,既解决了滑动过程中图片加载不及时导致的卡顿白块,又避免了首页白屏问题,同时降低内存压力。华为与鸿蒙生态中的应用伙伴通力合作,在多个实际应用场景中验证了该方案的可行性,帮助使用 imageKnife 的 10 多位伙伴解决了滑动白块问题。

 

目前,该方案的相关代码库和文档已通过开源社区及技术平台开放,开发者可访问 Gitee、思否、51CTO、CSDN 等平台获取详细指南。

 


Gitee 链接:

https://gitee.com/ohadss/white_block_solution?login=from_csdn

思否链接:

https://segmentfault.com/a/1190000046046687

51CTO 链接:

https://ost.51cto.com/posts/31432

CSDN 链接:

https://harmonyosdev.csdn.net/678f60a2911edf5f3b042b1b.html

 

Web 页面全局组件复用库:预加载资源场景实现“零等待”

在 Web 页面的优化上,华为也带来了全新的技术方案。Web 页面在加载过程中,常因资源下载耗时导致页面卡顿、丢帧、白块问题,影响用户体验。传统的原生容器组件无法直接预渲染 Web 组件,因此开发者通常需要自行维护节点池,开发成本高昂。而华为提供的全局自定义组件复用三方库“nodepool”,则通过 BuilderNode 创建全局自定义组件复用池,实现跨页面的 Web 组件复用及自动化的入池、出池管理,极大地简化了 Web 页面的开发流程。

 


基于“nodepool”的持续优化,这一方案在原生页面的高性能滑动体验上,已经实现了对竞品的超越,并提供了一种简单易用的全局组件复用能力,大幅提升开发者的开发效率,让代码量减少 200 行以上。在降低开发难度的同时,该方案还通过优化资源加载与渲染流程,大幅降低了滑动卡顿和丢帧率,使 Web 页面的加载几乎可达到“秒开”效果。以某头部旅行应用为例,在应用该方案后,Web 页面的预加载体验得到显著提升,页面基本能够实现瞬时打开,从根本上解决了预加载资源耗时过长的问题。

 

目前,“nodepool”已上线 OpenHarmony 社区三方库中心仓,开发者可访问“OpenHarmony 官网”,点击“开发者”——>“三方库中心仓”——>搜索“nodepool”,下载使用。

 

更多关于“nodepool”的详细信息和使用指南,请访问:

https://ohpm.openharmony.cn/#/cn/detail/@hadss%2Fnodepool/v/1.0.2-rc.0

 

华为此次推出的 ArkUI 与 Web 页面滑动白块/白屏解决方案,不仅优化了鸿蒙应用的页面加载性能,更显著降低了开发者实现高性能滑动效果的门槛。欢迎更多开发者应用厂商使用和反馈,共同提升鸿蒙应用的性能与体验。

 

未来华为也将持续携手生态伙伴共建创新,面向底座技术、通用能力、垂类行业等场景推出系列开发者场景化解决方案,不断提升鸿蒙原生应用的创新体验和开发效率,与广大开发者共建繁荣的鸿蒙生态。

2025-03-06 11:361166

评论

发布
暂无评论

阿里巴巴发布“限量版”Java零基础宝典,万字Java技术类校招面试题汇总

Java 程序员 后端

带你学会区分Scheduled Thread Pool Executor 与Timer

华为云开发者联盟

线程 线程池 Timer 任务调度 JDK 1.5

亚马逊QLDB与腾讯TDSQL生产背景与模型

腾讯云数据库

数据库 tdsql

OSCAR纪实:华为与开源生态伙伴协力同行,共创未来

科技热闻

ECMAScript 2021(ES12)新特性简介

程序那些事

JavaScript ecmascript 程序那些事 ES12

阿里,快手,拼多多等7家大厂Java面试真题,Java笔试题及答案详解

Java 程序员 后端

如何写出安全又可靠的PHP脚本

咔咔

php

深入解读TDSQL-C的内核关键技术

腾讯云数据库

数据库 tdsql

揭秘TDSQL-A分布式执行框架:解放OLAP关联分析查询性能瓶颈

腾讯云数据库

数据库 tdsql

汽车智能座舱中 显示屏市场战略趋势分析 上篇

SOA开发者

软件定义汽车

索信达控股:新一代金融知识图谱解决方案的落地应用和研究

索信达控股

金融科技 金融 知识图谱

揭秘腾讯TDSQL全时态数据库系统

腾讯云数据库

数据库 tdsql

TDSQL全时态数据库的价值和意义

腾讯云数据库

数据库 tdsql

Apache Hudi 在 B 站构建实时数据湖的实践

Apache Flink

大数据 flink

干货帖 | TDSQL-A核心架构揭秘

腾讯云数据库

数据库 tdsql

为什么说腾讯云TDSQL是金融行业的“杀手锏”级应用?

腾讯云数据库

数据库 tdsql

开便利店可以实现财富自由吗?

石头IT视角

啥都复用不了,还谈什么中台!

菜根老谭

中台 复用 技术管理 平台架构

我们应该如何过好自己这一生?

Phoenix

心理学

Flink 在 58 同城的应用与实践

Apache Flink

大数据 flink

阿里巴巴发布“限量版”Java零基础宝典,38岁的中年失业者怎么活下去

Java 程序员 后端

腾讯云分布式数据库TDSQL再获认可

腾讯云数据库

数据库 tdsql

Shell:Lite OS在线调试工具知多少

华为云开发者联盟

Shell 操作系统 Lite OS 在线调试 命令函数

阿里巴巴Java方向面试题汇总(含答案),为什么数据库会丢失数据

Java 程序员 后端

TDSQL-C 数据库架构

腾讯云数据库

数据库 tdsql

阿里,快手,拼多多等7家大厂Java面试真题,Java开发面经分享

Java 程序员 后端

分布迁移下的深度学习时间序列异常检测方法探究

云智慧AIOps社区

深度学习 异常检测 技术学习 智能运维 分布迁移

大力出奇迹,揭秘昇腾CANN的AI超能力

华为云开发者联盟

AI 算法 算力 CANN

“十三五”新型显示重大科技成果落地对接及产业发展研讨会召开

科技热闻

论亚马逊QLDB与腾讯TDSQL架构与功能

腾讯云数据库

数据库 tdsql

37 手游基于 Flink CDC + Hudi 湖仓一体方案实践

Apache Flink

大数据 flink

Get这个秘籍,告别鸿蒙原生应用页面滑动白块/白屏困扰_HarmonyOS_HarmonyOS_InfoQ精选文章