鸿蒙应用开发:提升性能的利器——防抖与节流

为了应对频繁的事件调用所带来的性能瓶颈,我们需要引入防抖(debounce)和节流(throttle)这两个利器。

防抖:抑制不必要的高频事件

防抖是一种技术,它可以在一定时间内抑制不必要的高频事件。在鸿蒙应用开发中,防抖可以用来优化事件处理,例如按钮点击事件。

防抖的工作原理是:当一个事件被频繁调用时,防抖函数会将事件放入一个计时器中。在这个计时器中,事件将在一个指定的等待时间后执行。如果在等待时间内又收到了该事件的调用,那么计时器将被重新设置,等待时间将从头开始计算。

节流:限制事件调用的频率

节流是一种技术,它可以限制事件调用的频率。在鸿蒙应用开发中,节流可以用来优化输入框中的输入事件处理。

节流的工作原理是:当一个事件被频繁调用时,节流函数会将事件放入一个令牌桶中。在这个令牌桶中,事件将按照一个固定的速度执行。如果令牌桶已满,那么事件将被丢弃。

防抖与节流的比较

防抖和节流都是用来处理高频事件的利器,但是它们的工作方式不同。

  • 防抖: 在一定时间内只执行一次事件。
  • 节流: 以固定的速度执行事件,丢弃多余的事件。
在鸿蒙应用开发中的应用

防抖和节流可以在鸿蒙应用开发中得到以下应用:

  • 事件处理: 防抖可以用来优化按钮点击事件等高频事件的处理,避免不必要的高频调用。
  • 输入框输入: 节流可以用来限制输入框中输入事件的频率,避免不必要的多余请求。
  • 网络请求: 防抖和节流可以用来优化网络请求,避免不必要的多余请求。
  • 滚动事件: 节流可以用来限制滚动事件的频率,避免不必要的高频调用。

示例代码

总结

防抖和节流是鸿蒙应用开发中提升性能的利器。通过合理使用防抖和节流,可以有效优化事件处理、输入框输入、网络请求和滚动事件,从而提升应用的整体性能和用户体验。

参考链接


Compare Arrays in JavaScript

HarmonyOS NEXT 系统推荐使用 Lodash 库,更符合开发直觉。

Arrays are objects in JavaScript, so the triple equals operator === only returns true if the arrays are the same reference.

How do you compare whether two arrays are equal? Equality is a tricky subject: the JavaScript spec defines 4 different ways of checking if two values are "equal", and that doesn't take into account deep equality between objects.

In cases like this, it helps to be as explicit as possible about what you mean by "equal." In software engineering, asking a question in the right way often makes the answer obvious.

With that in mind, here's 3 definitions of equality for arrays and how to check them.

Same Length, Each Value Equal

One approach for comparing a and b is checking if each value of a is strictly equal to the corresponding value of b. This works well if all the elements of the arrays are primitives as opposed to objects.

Deep Equality With POJOs

The previous arrayEquals() function works great for primitive values, but falls short if you want to compare objects by value.

One neat way to take into account object values is comparing arrays by their JSON.stringify() output.

This approach is handy because it requires minimal code and no outside libraries. However, comparing JSON.stringify() output has an unfortunate edge case that may be a problem depending on your use case. Since undefined isn't a valid JSON value, the below arrays have the same JSON.stringify() output, because JSON.stringify() converts undefined to null.

Using Lodash's isEqual()

In addition to the null vs undefined quirk, comparing JSON.stringify() output also doesn't take into account object types. As far as JSON.stringify() is concerned, an object with a toJSON() function that returns 42 is the same as the number 42.

Similarly, a custom object is the same as a POJO:

Lodash's isEqual() function, on the other hand, takes all this into account.

Lodash's isEqual() function is the way to go if you need all the bells and whistles of checking that objects have the same class. The JSON.stringify() approach works well for POJOs, just make sure you take into account null and only use it with trusted data - toJSON() can be a security vulnerability.

参考链接


Compare Arrays in JavaScript

HarmonyOS NEXT鸿蒙手机Charles/Reqable抓包证书配置方面的一些疑惑

【问题1】

鸿蒙手机配置网络代理,只能断开wifi连接,然后再重新连接时才能配置代理?是这样的吗?华为设备网络代理配置需要长按对应的wifi配置弹出,但鸿蒙手机中貌似不管用。

解答

是的。当前确实需要断开WIFI再重新连接时配置代理。

【问题2】

鸿蒙的证书导入有什么推荐的方案吗?使用访问 chls.pro/ssl 的方式不会自动下载?下载证书后,使用「华为管家」,但 Mac 好像没有一个比较稳定的版本?

解答

首先,Mac PCCharles 导出证书,点击 Help -> SSL Proxying -> Save Charles Root Certificate

其次,导入系统根证书至手机,有两个方法。

方法一:启动证书安装器进行指定 pem 证书安装。

1.将 Charles 导出的 pem 文件 hdc file send 到手机存储器内。

2.启动动证书安装

3.选择从存储设备安装,选择指定 pem 证书。

方法二:替换 CA 证书,证书路径为沙箱映射路径,系统预设 CA 证书位置:/etc/ssl/certs/cacert.pem,将 Charles 导出的 pem 文件 hdc file send 到此路径下(目前仅支持后缀名为 .pem 的文本格式证书)。

示例命令:

再次,安装 Charles 证书到 PC 系统可信目录。

点击 Help -> SSL Proxying -> Install Charles Root Certificate -> 安装证书 -> 选择证书存储路径为:受信任的根证书颁发机构。

最后,设置代理。

点击 Proxy -> SSL Proxy Settings -> 在 Include 添加 *:**:443

点击 Proxy -> Proxy Settings  -> 勾选 Enable transparent HTTP proxying

注意:截止 2024/03/25 ,华为P60 升级到的鸿蒙 HarmonyOS NEXT,按照上述方式配置之后,依旧是无法通过 Charles / Reqable 进行中间人代理的。目前看到系统并没有使用我们刚刚导入的根证书。导致无法完成中间人抓包。

目前可以部分解决的问题方式是自己启动一个 Tomcat 服务器,然后配置客户端通过 HTTP 的方式进行报文的发送,从而可以看到上行报文内容。

【问题3】

鸿蒙的证书信任如何设置?设置中搜索一些配置关键字然后信任,但问题是,我的鸿蒙测试设备的设置中根本没有搜索……

解答

Charles 导出的 pem 文件 hdc file send 到手机存储器内。

可以参考如下命令:

注意:截止 2024/03/25 ,华为P60 升级到的鸿蒙 HarmonyOS NEXT,只能通过 hdc file send 发送到手机的临时目录 data/local/tmp/ 路径下,而证书凭证应用并不能找到这个目录,导致依旧无法导入证书。

目前可以解决的问题方式是通过U盘作为中介的方式完成文件的传输。

【鸿蒙正式版本 5.0.0 安装根证书】

1. “设置” 页面选择 “隐私和安全”,如下图:

2. “隐私和安全” 页面滑动到最底部,选择 “高级”,如下图:

3. “高级” 页面,选择 “证书与凭据”,如下图:

4. “证书与凭据” 页面,选择 “从存储设备安装”,如下图:

5. “从存储设备安装” 页面,选择 “CA证书”,并在弹出的根证书安装警告对话框中选择 “继续”,如下图:

6. “从存储设备安装” 打开的文件选择器页面,找到下载的根证书,并选中,如下图:

7. 证书导入结果,如下图:

8. 再次点击 “CA证书”,可以查看已经导入的根证书,如下图:

参考链接


基于 Verdaccio 搭建鸿蒙(HarmonyOS Next)开发的轻量级 Node.js 私有仓库

一、背景

最近在进行 HarmonyOS Next 应用开发,官方的 DevEco Studio 4.1 需要时候 Node.js,但是公司开发环境不支持外网访问,需要搭建内网的镜像服务器。下面,我们研究在内网服务器只使用 Apache(HTTPD)/Nginx 提供文件下载服务,不安装 NodeJs 搭建代理服务的方法来建立 NPM 文件下载代理。

执行缓存任务的设备是 MacBook Pro 2023 / macOS Sonoma 14.3

二、简介

1. 什么是 Verdaccio

“一个基于 Node.js 的轻量级私有仓库”。
平时使用 npm publish 进行发布时,上传的仓库默认地址是 npm,通过 Verdaccio 工具在本地新建一个仓库地址,再把本地的默认上传仓库地址切换到本地仓库地址即可。当 npm install 时没有找到本地的仓库,则 Verdaccio 默认配置中会从 npm 中央仓库下载。

注:Verdaccio 表示意大利中世纪晚期 fresco 绘画中流行的一种绿色的意思。

2. 优点
  • 私密性高,仅团队共享。
  • 安全性高,能够有效的防治恶意代码攻击。
  • 使用局域网,传输速度快。
3. 官网

三、准备环境

配置 verdaccio 从华为镜像服务器地址下载,默认配置服务器地址国内访问可能存在问题。另外注意禁用 npm-audit ,安全审计会非常非常慢,而且经常失败。

修改后的完整配置如下:

启动一个独立的Shell 运行 verdaccio 

清理缓存,并且要求通过 verdaccio 代理下载:

当前(2024/02/01)申请并通过了华为开发计划的才可以下载到 HarmonyOS NEXT 开发需要的 HUAWEI DevEco Studio 4.x 版本(API 11)HUAWEI DevEco Studio 5.x (API 11、API 12) HarmonyOS Developer管理中心套件货架 目前只有这个版本的包含离线鸿蒙开发依赖 ohpm-repo,官方文档以及报错信息还是稀烂,基本找不到有用信息,需要自己研究。

注意: 目前测试发现 DevEco Studio 4.1.3.500 版本无法真机调试 C++ 代码。 DevEco Studio 4.1.3.501 版本可以正常调试。

截止 2024/04/01 最新Release版本是 DevEco Studio 4.1.3.700,最新测试版本 DevEco Studio 5.0.3.100(SP1),可惜编译不通过,报错如下:

DevEco Studio 4.1.3.501 使用的官方SDK下载地址:

下载完成后,解压缩到 SDK 目录下的 HarmonyOS-NEXT-DP1 目录即可,如下图:

继续阅读基于 Verdaccio 搭建鸿蒙(HarmonyOS Next)开发的轻量级 Node.js 私有仓库