智能网络感知,打造极致流畅的鸿蒙原生版中国移动云盘图文体验
背景
中国移动云盘(原“和彩云网盘”)是中国移动重磅推出的安全、智能、不限速、移动用户免流的智能云盘,致力于成为5G时代用户个人与家庭的数字资产管理中心,是中国移动继语音、短信、流量后的“第四项基础服务”。
照片、音视频的备份和使用是市面上所有网盘用户的重点体验场景,用户将照片等资源备份到云盘,以节省本地资源存储。批量的图片、音视频缩略图加载,有时因网络原因出现加载缓慢等异常。中国移动云盘技术团队,致力于实现极致流畅的图文加载体验持续优化。
解决方案
以中国移动云盘鸿蒙原生版为例,借助华为Remote Communication Kit提供的智能网络感知服务,中国移动云盘通过三个步骤,提升了用户使用云盘时的加载体验,为用户提供更丝滑的云盘服务。
步骤一:动态预加载机制
以中国移动云盘的相册为例,当用户打开相册时,图文加载区域分为预加载区域、预渲染区域以及可见区域。
首先,智能网络感知服务帮助中国移动云盘优先保证用户可见区域的加载完成,并跟随屏幕滑动动态调整预加载区域,同时通过本地文件缓存替代实时加载的形式,在屏幕滑动时大大降低了图片白块概率;再通过减少预渲染区域预加载的图片数量,降低UI渲染带来的CPU负载开销。
步骤二:动态取消加载机制
当用户快速滑动屏幕时,有时候有的资源已经滑出了屏幕,但网络请求还未到达。中国移动云盘基于智能网络感知服务的网络请求可取消机制,在用户快速滑动时,将滑过屏幕的资源取消加载,降低网络负载。
步骤三:智能网络感知下动态调控预加载区域机制
基于RCP的网络耗时统计能力,可以计算出每个资源请求的平均耗时,感知网络质量并智能调整预加载区域。在网络质量好时,增大预加载区域,网络质量差时,就降低预加载区域。
成果展示
最终,通过中国移动云盘专家与华为网络通信专家联合构建图文资源动态加载,实现了鸿蒙原生版中国移动云盘网络资源如本地资源一样的流畅加载体验。
优化前:有时因网络原因出现加载占位图和加载过程动画。
优化后:随意滑动,图文内容加载非常流畅自然。
开发指南
1、下载并安装:
ohpm install @netteam/prefetcher
有关 OpenHarmony ohpm 环境配置的更多信息,请参阅如何安装 OpenHarmony ohpm 包。
2、集成预取器:
在深入探讨细节之前,需要提及两点。
1.预取程序驱动用户代码获取所显示集合中的项目所引用的资源。换句话说,用户代码获取 URL 存储在集合项目中的图像。
2.有两种使用 Prefetcher API 的方法。第一种方法假设保存项目的数据源实现了两种附加方法:prefetch()和cancel() IDataSourcePrefetching。第二种方法(稍后介绍)使用用户注册的回调来执行相同的任务。方法的选择由用户决定,但“基于回调”的方法比“基于预取数据源”的方法更具优势:
更容易组织工作线程上的提取。
支持以数组形式呈现的集合,并因此支持Repeat组件。
通过遵循单一责任原则来更好地组织应用程序代码,因为数据源不负责执行获取。
3、使用“基于预取数据源”的方法
以下是Prefetcher 演示存储库中示例应用程序之一的详细代码片段。该应用程序演示了预取器库的使用。演示应用程序包含大量图像。每幅图像都是在应用程序内合成的彩色矩形。获取操作在主应用程序线程上执行。
import { BasicPrefetcher, IDataSourcePrefetching } from '@netteam/prefetcher';
import { image } from '@kit.ImageKit';
import { create10x10Bitmap, getRandomColor } from 'examples_common'; // Code of these functions is omitted for brevityconst ITEMS_ON_SCREEN = 8;@Component
export struct PrefetcherDemoComponent {private readonly dataSource = new SimulationDataSource(2000, 500);private readonly prefetcher = new BasicPrefetcher(this.dataSource);build() {Column() {List() {LazyForEach(this.dataSource, (item: PictureItem) => {ListItem() {PictureItemComponent({ info: item }).height(`${100 / ITEMS_ON_SCREEN}%`)}}, (item: PictureItem) => item.title)}.onScrollIndex((start: number, end: number) => {this.prefetcher.visibleAreaChanged(start, end);})}}
}@Component
export default struct PictureItemComponent {@ObjectLink info: PictureItem;build() {Row() {Image(this.info.imagePixelMap).objectFit(ImageFit.Contain).width('40%')Text(this.info.title).width('60%')}}
}@Observed
export class PictureItem {readonly color: number;title: string;imagePixelMap: image.PixelMap | undefined;key: string;constructor(color: number, title: string) {this.color = color;this.title = title;this.key = title;}
}type ItemIndex = number;
type TimerId = number;class SimulationDataSource implements IDataSourcePrefetching {private readonly items: PictureItem[];private readonly fetchDelayMs: number;private readonly fetches: Map<ItemIndex, TimerId> = new Map();constructor(numItems: number, fetchDelayMs: number) {this.items = [];this.fetchDelayMs = fetchDelayMs;for (let i = 0; i < numItems; i++) {const item = new PictureItem(getRandomColor(), `Item ${i}`);this.items.push(item);}}async prefetch(index: number): Promise<void> {const item = this.items[index];if (item.imagePixelMap) {return;}// Simulate long running operationreturn new Promise<void>(resolve => {const timeoutId = setTimeout(async () => {this.fetches.delete(index);const bitmap = create10x10Bitmap(item.color);const imageSource: image.ImageSource = image.createImageSource(bitmap);item.imagePixelMap = await imageSource.createPixelMap();resolve();}, this.fetchDelayMs);this.fetches.set(index, timeoutId);});}cancel(index: number): void {const timerId = this.fetches.get(index);if (timerId) {this.fetches.delete(index);clearTimeout(timerId);}}totalCount(): number {return this.items.length;}getData(index: number): PictureItem {return this.items[index];}registerDataChangeListener(_: DataChangeListener): void {}unregisterDataChangeListener(_: DataChangeListener): void {}
}
该类PictureItem表示引用需要“下载”才能呈现给用户的数据的项目。获取后,它将获得Image组件的像素图。
是SimulationDataSource与预取器和组件链接的数据源LazyForEach。其单个参数指定列表大小。它负责执行获取操作并模拟获取图像,并附加延迟,可在其构造函数中设置。延迟以毫秒为单位指定。
一旦图片准备好,就会包装每个并允许显示图像PictureItemComponent。PictureItem
探索更多
Remote Communication Kit是HarmonyOS系统提供对HTTP发起数据请求的NAPI封装,通过@hms.collaboration.rcp(简称rcp)模块将相关能力开放给开发者,为开发者提供基于rcp的文件上传与下载的开发实践。
访问Remote Communication Kit华为开发者联盟官网,以及开发者方案示例,了解更多详情开始使用。
相关文章:
智能网络感知,打造极致流畅的鸿蒙原生版中国移动云盘图文体验
背景 中国移动云盘(原“和彩云网盘”)是中国移动重磅推出的安全、智能、不限速、移动用户免流的智能云盘,致力于成为5G时代用户个人与家庭的数字资产管理中心,是中国移动继语音、短信、流量后的“第四项基础服务”。 照片、音视…...
MySQL查看视图
《MySQL 9从入门到性能优化(视频教学版)(数据库技术丛书)》(王英英)【摘要 书评 试读】- 京东图书 (jd.com) MySQL9数据库技术_夏天又到了的博客-CSDN博客 查看视图是查看数据库中已存在的视图的定义。查看视图必须要有SHOW VIE…...
量子计算的基本运算:Hadamard 门、CNOT 门、Pauli 门详解
量子计算是现代计算科学的前沿领域,它与经典计算机在处理信息的方式上有着本质的区别。量子计算机利用量子比特(qubit)的叠加态和量子纠缠等特性来进行计算,从而在某些特定任务上超越传统计算机。量子计算的核心运算单元是量子门,它们通过作用于量子比特来操控量子状态。本…...
java(spring boot)实现向deepseek/GPT等模型的api发送请求/多轮对话(附源码)
我们再启动应用并获取api密钥后就可以对它发送请求了,但是官方文档对于如何进行多轮对话以及怎么自定义参数并没有说的很清楚,给的模板也没有java的,因此我们需要自己实现。 import org.json.JSONArray; import org.json.JSONObject;import j…...
Flask flash() 消息示例
目录 安装 Flask 入门:Flask flash() 基本示例 进阶:使用 Flask-WTF Flash 登录结果消息 详解:get_flashed_messages() 详解:flash() 消息的完整生命周期 Flask 提供 flash() 用于向 用户传递临时消息,通常用于: • 表单提交成功或失败 • 用户登录、注册、退出提…...
ubuntu环境编译ffmepg支持nvidia显卡加速
文章目录 1. 安装NVIDIA驱动2. 安装CUDA&NV-CODEC2.1 安装CUDA2.2 安装NV-CODEC 3. 编译ffmpeg3.1 安装依赖3.2 下载源码安装依赖3.3 验证 4. 使用 1. 安装NVIDIA驱动 安装依赖包 sudo apt install -y ubuntu-drivers-common编辑 /etc/modprobe.d/blacklist-nouveau.conf 文…...
C++类与对象深度解析(一):从引用、内联函数到构造析构的编程实践
目录 一.引用 引用的特征:1.引用必须初始化 2.本质是别名 3.函数参数传递 4.常引用 5.函数返回值 6.权限 放大 缩小 平移 引用 vs 指针 二.内联函数 关键点说明 三.宏函数 四.类 什么是类? 简单的类 五.构造函数与析构函数 1. 构造函数&…...
SpringCloud-使用FFmpeg对视频压缩处理
在现代的视频处理系统中,压缩视频以减小存储空间、加快传输速度是一项非常重要的任务。FFmpeg作为一个强大的开源工具,广泛应用于音视频的处理,包括视频的压缩和格式转换等。本文将通过Java代码示例,向您展示如何使用FFmpeg进行视…...
Pytorch实现之粒子群优化算法在GAN中的应用
简介 简介:主要是采用了粒子群优化(PSO)算法来优化GAN的一个训练。PSO是一种是一种基于种群的随机优化技术。这种优化技术是通过粒子群进行的,粒子群在每次迭代中都会更新自己。对于给定的目标函数,这种方法利用一个搜索空间,在那里粒子群移动,找到所需的全局最小值。这…...
http+nginx
HTTP协议:超文本传输协议,Hyper Text transfer protocol(发明者:蒂姆.伯纳斯.李) 1.超文本 包含超链接(link)和各种多媒体元素的文本,这些超文本文件彼此相连,形成网状(web&…...
网络运维学习笔记 014网工初级(HCIA-Datacom与CCNA-EI)ACL访问控制列表
文章目录 ACL(Access Control List,访问控制列表)思科:实验1(标准ACL):实验2(扩展ACL):实验3(ACL在VTY的使用场景): 华为&…...
002 SpringCloudAlibaba整合 - Feign远程调用、Loadbalancer负载均衡
前文地址: 001 SpringCloudAlibaba整合 - Nacos注册配置中心、Sentinel流控、Zipkin链路追踪、Admin监控 文章目录 8.Feign远程调用、loadbalancer负载均衡整合1.OpenFeign整合1.引入依赖2.启动类添加EnableFeignClients注解3.yml配置4.日志配置5.远程调用测试6.服务…...
机器视觉检测中,2D面阵相机和线扫相机的区别
2D面阵相机和线扫相机是工业视觉系统中常用的两种相机类型,各有其特点和应用场景。 2D面阵相机 特点: 成像方式:通过二维传感器一次性捕捉整个场景的图像。 分辨率:分辨率由传感器的像素数决定,常见的有百万像素到几千…...
解锁观察者模式:Java编程中的高效事件管理之道
系列文章目录 后续补充~~~ 文章目录 一、引言:探索观察者模式的奥秘二、观察者模式的核心原理2.1 模式定义与概念2.2 关键角色剖析2.3 工作机制深度解析 三、观察者模式在 Java 中的实现3.1 手动实现观察者模式3.2 使用 JDK 内置的观察者模式3.3 代码示例解析与对比…...
Ubuntu编译ZLMediaKit
下载 git clone https://gitee.com/xia-chu/ZLMediaKit cd ZLMediaKit git submodule update --init安装工具 sudo apt install -y build-essential sudo apt install -y gcc g sudo apt install -y cmakesudo apt install -y build-essential cmake git libssl-dev libsdl1.…...
全面指南:使用JMeter进行性能压测与性能优化(中间件压测、数据库压测、分布式集群压测、调优)
目录 一、性能测试的指标 1、并发量 2、响应时间 3、错误率 4、吞吐量 5、资源使用率 二、压测全流程 三、其他注意点 1、并发和吞吐量的关系 2、并发和线程的关系 四、调优及分布式集群压测(待仔细学习) 1.线程数量超过单机承载能力时的解决…...
鸿蒙初学者学习手册(HarmonyOSNext_API14)_自定义动画API(@ohos.animator (动画) )
前言 在纯血鸿蒙中最具有用户特色的效果就是自定义的动画效果。在纯血鸿蒙中有多种定义方式,但是今天介绍的是ApI中的自定义动画。 注意: 动画本身具有生命周期,但是不支持在UIAbility的文件使用,简单而言就是不允许在UIAbility生命周期中…...
Grok 3.0 Beta 版大语言模型评测
2025年2月17日至18日,全球首富埃隆马斯克(Elon Musk)携手其人工智能公司xAI,在美国重磅发布了Grok 3.0 Beta版。这款被誉为“迄今为止世界上最智能的语言模型”的AI,不仅集成了先进的“DeepSearch”搜索功能࿰…...
IDEA中查询Maven项目的依赖树
在Maven项目中,查看项目的依赖树是一个常见的需求,特别是当你需要了解项目中直接或间接依赖了哪些库及其版本时。你可以通过命令行使用Maven的dependency:tree插件来做到这一点。这个命令会列出项目中所有依赖的树状结构。 打开idea项目的终端ÿ…...
学习aigc
DALLE2 论文 Hierarchical Text-Conditional Image Generation with CLIP Latents [2204.06125] Hierarchical Text-Conditional Image Generation with CLIP LatentsAbstract page for arXiv paper 2204.06125: Hierarchical Text-Conditional Image Generation with CLIP L…...
springboot整合mybatis-plus【详细版】
目录 一,简介 1. 什么是mybatis-plus2.mybatis-plus特点 二,搭建基本环境 1. 导入基本依赖:2. 编写配置文件3. 创建实体类4. 编写controller层5. 编写service接口6. 编写service层7. 编写mapper层 三,基本知识介绍 1. 基本注解 T…...
【2024 CSDN博客之星】大学四年,我如何在CSDN实现学业与事业的“双逆袭”?
前言: Hello大家好,我是Dream。不知不觉2024年已经过去,自己也马上迈入23岁,感慨时间飞快,从19岁刚入大学加入CSDN,到现在大学毕业已经整整四年了。CSDN陪伴我走过了最青涩的四年大学时光,在这里…...
在VS中通过vcpkg包管理器来安装使用qt5
常用指令 .\vcpkg install 库名 .\vcpkg install 库名版本号.\vcpkg install 库名 --trip x86-windows.\vcpkg list.\vcpkg search 库名 .\vcpkg x-all-installed --7zip PS G:\vcpkg> .\vcpkg help usage: vcpkg <command> [--switches] [--optionsvalues] [argume…...
【C++篇】树影摇曳,旋转无声:探寻AVL树的平衡之道
文章目录 从结构到操作:手撕AVL树的实现一、AVL树介绍1.1 什么是AVL树1.2 平衡因子的定义1.3 平衡的意义1.4 AVL树的操作 二、AVL树的节点结构2.1 节点结构的定义: 三、插入操作3.1 插入操作概述3.2 步骤1:按二叉查找树规则插入节点3.3 步骤2…...
CPU、SOC、MPU、MCU--详细分析四者的区别
一、CPU 与SOC的区别 1.CPU 对于电脑,我们经常提到,处理器,内存,显卡,硬盘四大部分可以组成一个基本的电脑。其中的处理器——Central Processing Unit(中央处理器)。CPU是一台计算机的运算核…...
nacos编写瀚高数据库插件
1、下载nacos源码 git clone gitgithub.com:alibaba/nacos.git 2、引入瀚高驱动 <dependency><groupId>com.highgo</groupId><artifactId>jdbc</artifactId><version>${highgo.version}</version></dependency> 3、DataSource…...
使用excel中的VBA合并多个excel文件
需求是这样的: 在Windows下,用excel文件让多个小组填写了统计信息,现在我需要把收集的多个文件汇总到一个文件中,前三行为标题可以忽略,第四行为收集信息的列名,处理每一行数据的时候,发现某一行…...
linux 安装启动zookeeper全过程及遇到的坑
1、下载安装zookeeper 参考文章:https://blog.csdn.net/weixin_48887095/article/details/132397448 2、启动失败 1、启动失败JAVA_HOME is not set and java could not be found in PATH 已安装 JAVA 配置了JAVA_HOME,还是报错解决方法:参考…...
JAVA JUC 并发编程学习笔记(一)
文章目录 JUC进程概述对比 线程创建线程ThreadRunnableCallable 线程方法APIrun startsleep yieldjoininterrupt打断线程打断 park终止模式 daemon不推荐 线程原理运行机制线程调度未来优化 线程状态查看线程 同步临界区syn-ed使用锁同步块同步方法线程八锁 锁原理Monitor字节码…...
内容中台架构下智能推荐系统的算法优化与分发策略
内容概要 在数字化内容生态中,智能推荐系统作为内容中台的核心引擎,承担着用户需求与内容资源精准匹配的关键任务。其算法架构的优化路径围绕动态特征建模与多模态数据融合展开,通过深度强化学习技术实现用户行为特征的实时捕捉与动态更新&a…...
Java 内存区域详解
1 常见面试题 1.1 基本问题 介绍下Java内存区域(运行时数据区)Java对象的创建过程(五步,建议能够默写出来并且要知道每一步虚拟机做了什么)对象的访问定位的两种方式(句柄和直接指针两种方式)…...
jEasyUI 创建学校课程表
jEasyUI 创建学校课程表 引言 随着信息技术的飞速发展,教育行业也迎来了数字化转型的浪潮。学校课程表的创建和管理作为教育信息化的重要组成部分,其效率和准确性直接影响到学校的教学秩序。jEasyUI,作为一款优秀的开源UI框架,凭借其易用性、灵活性和丰富的组件,成为了许…...
利用 OpenCV 进行棋盘检测与透视变换
利用 OpenCV 进行棋盘检测与透视变换 1. 引言 在计算机视觉领域,棋盘检测与透视变换是一个常见的任务,广泛应用于 摄像机标定、文档扫描、增强现实(AR) 等场景。本篇文章将详细介绍如何使用 OpenCV 进行 棋盘检测,并…...
git-提交时间和作者时间的区别
1.介绍 定义介绍 提交时间(Committer Date):决定了提交在 Git 历史中的位置,通常影响 GitHub 上提交显示的顺序。 作者时间(Author Date):虽然不影响提交的排序,但在每个提交详情页…...
解决双系统开机显示gnu grub version 2.06 Minimal BASH Like Line Editing is Supported
找了好多教程都没有用,终于解决了!!我是因为ubuntu分区的时候出问题了 问题描述: 双系统装好,隔天开机找不到引导项,黑屏显示下列 因为我用的D盘划分出来的部分空闲空间,而不是全部,…...
基于Flask的京东商品信息可视化分析系统的设计与实现
【Flask】基于Flask的京东商品信息可视化分析系统的设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 系统能够灵活地执行SQL查询,提取出用于分析的关键数据指标。为了将这…...
期权帮|股指期货中的套期保值如何操作?
锦鲤三三每日分享期权知识,帮助期权新手及时有效地掌握即市趋势与新资讯! 股指期货中的套期保值如何操作? 一、股指期货中的套期保值准备阶段 确定套保需求,投资者依据市场预判与投资组合分析,决定是否套保。 &…...
用Chrome Recorder轻松完成自动化测试脚本录制
前言 入门自动化测试,录制回放通常是小白测试首先用到的功能。而录制回放工具也一直是各大Web自动化测试必然会着重提供的一块功能。 早期WinRunner、QTP这样的工具,自动化测试可以说是围绕录制回放开展的。近年像Selenium也提供有录制工具 Selenium IDE,Playwright也包含…...
C/C++面试知识点总结
目录 1. 指针1.1 智能指针1.2 指针和引用的区别1.3 数组和指针的区别1.4 数组指针和指针数组的区别1.5 迭代器和指针的区别1.6 strcpy 和 memcpy 的区别 2. 内存管理与分配2.1 内存分配与存储区2.2 malloc / free2.3 volatile和extern的区别2.4 拷贝构造函数2.5 预处理、编译、…...
springboot三层架构详细讲解
目录 springBoot三层架构 0.简介1.各层架构 1.1 Controller层1.2 Service层1.3 ServiceImpl1.4 Mapper1.5 Entity1.6 Mapper.xml 2.各层之间的联系 2.1 Controller 与 Service2.2 Service 与 ServiceImpl2.3 Service 与 Mapper2.4 Mapper 与 Mapper.xml2.5 Service 与 Entity2…...
助力DeepSeek私有化部署服务:让企业AI落地更简单、更安全
在数字化转型的浪潮中,越来越多的企业选择私有化部署AI技术,以保障数据安全、提升业务效率并实现自主可控。DeepSeek作为行业领先的AI开源技术,其技术可以支持企业私有化部署,企业需要一站式服务私有化部署,涵盖硬件采…...
Mac book Air M2 用VMware安装 Ubuntu22.04
安装 VMware Fusion 下载 Ubuntu 安装VMware 完成之后运行新建 将对应Ubuntu 版本拖拽 如图 选择第一个回车 选绿色 回车 为空 相关命令行 sudo apt install net-tools sudo apt install ubuntu-desktop sudo reboot 常用命令行 uname uname -a clear ll ifconfig (查…...
Spring Boot接收参数的19种方式
Spring Boot是一个强大的框架,允许开发人员通过多种方式接收和处理参数。无论是HTTP请求参数、路径变量,还是请求体中的数据,Spring Boot都能提供灵活的处理方式。本文将介绍19种不同的方式来接收参数。 1. 查询参数(Query Param…...
Linux firewalld 常用命令
本文参考RedHat官网文章How to configure a firewall on Linux with firewalld。 Firewalld 是守护进程名,对应命令为firewall-cmd。帮助详见以下命令: $ firewall-cmd --helpUsage: firewall-cmd [OPTIONS...]General Options-h, --help Pr…...
火语言RPA--Excel插入空行
【组件功能】:在Excel内指定的位置插入空行 配置预览 配置说明 在第n行之前 支持T或# 填写添加插入第n行之前行号。 插入n行 支持T或# 插入多少行。 Sheet页名称 支持T或# Excel表格工作簿名称。 示例 Excel插入空行 描述 在第3行之后插入3行。 配置 输…...
纷析云开源版- Vue2-增加字典存储到localStorage
main.js //保存字典数据到LocalStorage Vue.prototype.$api.setting.SystemDictType.all().then(({data}) > {loadDictsToLocalStorage(data) })新增 dictionary.js 放在 Utils文件夹里面 // 获取字典数据 export function getDictByType(dictType) {const dicts JSON.par…...
LangChain-基础(prompts、序列化、流式输出、自定义输出)
LangChain-基础 我们现在使用的大模型训练数据都是基于历史数据训练出来的,它们都无法处理一些实时性的问题或者一些在训练时为训练到的一些问题,解决这个问题有2种解决方案 基于现有的大模型上进行微调,使得它能适应这些问题(本…...
机器学习在脑卒中预测中的应用:不平衡数据集处理方法详解
机器学习在脑卒中预测中的应用:不平衡数据集处理方法详解 目录 引言 脑卒中的全球影响机器学习在医疗预测中的挑战类别不平衡问题的核心痛点数据预处理与特征选择 数据来源与清洗缺失值处理方法类别特征编码特征选择技术处理类别不平衡的四大方法 SMOTE(合成少数类过采样技术…...
Spring Boot项目@Cacheable注解的使用
Cacheable 是 Spring 框架中用于缓存的注解之一,它可以帮助你轻松地将方法的结果缓存起来,从而提高应用的性能。下面详细介绍如何使用 Cacheable 注解以及相关的配置和注意事项。 1. 基本用法 1.1 添加依赖 首先,确保你的项目中包含了 Spr…...
飞书API
extend目录下,API <?php // ---------------------------------------------------------------------- // | 飞书API // ---------------------------------------------------------------------- // | COPYRIGHT (C) 2021 http://www.jeoshi.com All rights reserved. …...