移动滑块拼图验证慢
=========

#### 问题现象

在移动滑块到图片中指定地方松手后，安全验证较慢，等待一段时间图片验证码才消失。

#### 背景知识

*   ArkUI Inspector：DevEco Studio提供的[布局分析](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-arkui-inspector)工具，开发者可以借助它预览真机或模拟器中的UI效果，快速定位布局层级问题，也可以观察组件属性、不同组件之间的关系等。
*   DevTools：一个Web前端开发调试工具，提供了电脑上调试移动设备前端页面的能力。开发者通过[setWebDebuggingAccess](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-webview-webviewcontroller#setwebdebuggingaccess)接口开启Web组件前端页面调试能力，利用DevTools工具可以在电脑上调试移动设备上的前端网页，更多详细内容可以看[使用DevTools工具调试前端页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/web-debugging-with-devtools)。

#### 问题定位

1.  使用ArkUI Inspector抓取图片验证码页面，发现该页面为Web页面。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5c/v3/idXajyS1QPS_TAFI16dseA/zh-cn_image_0000002658794565.png?HW-CC-KV=V1&HW-CC-Date=20260709T133747Z&HW-CC-Expire=86400&HW-CC-Sign=48D7AE5B3EBBF74002398397F903E830BB30280217D227228D263BFD2D4ACF18 "点击放大")
    
2.  使用DevTools录制图片验证码验证过程，在搜索框中输入touchend找到手指从屏幕移开的时间点为03.270左右，查看该时间点后未发现有较长耗时的网络请求。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a1/v3/HgceNMsmS5uHaUQWZKJdZg/zh-cn_image_0000002628555200.png?HW-CC-KV=V1&HW-CC-Date=20260709T133747Z&HW-CC-Expire=86400&HW-CC-Sign=CB93ACEE2B283F8C19F27A84AB5308F8641EDE72CBED83935650B6630C087043 "点击放大")
    
3.  排查图片验证码开始消失之前网页执行的任务，发现在05.049时间点有触发计时器，推测是在执行安全验证时有延迟操作，同时在该时间点附近有进行query（查询）网络请求。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a8/v3/Ttp81itRSk69ErI1Qo3GYA/zh-cn_image_0000002658914521.png?HW-CC-KV=V1&HW-CC-Date=20260709T133747Z&HW-CC-Expire=86400&HW-CC-Sign=AC4AFC2633E64AB61699B0AC55E0C65EAB4E99ED6B512121E2ED04BDDB6D553E "点击放大")
    
4.  在搜索框中输入setTimeout，发现在03.548时间有设置超时1.5s的计时器，与上述触发计时器的时间点吻合。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/96/v3/OCeVCGS7S7yRb0xZ5afFgw/zh-cn_image_0000002628395290.png?HW-CC-KV=V1&HW-CC-Date=20260709T133747Z&HW-CC-Expire=86400&HW-CC-Sign=BB328489A79284132E556BBE7D306FF2AA0907F71917894C8FF8A1189C093C1E "点击放大")
    
    查看手指离开屏幕到设置计时器的过程，发现有进行网络请求，耗时257ms左右。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/5b/v3/JV7pBA0uTBew62Mb-pQnvw/zh-cn_image_0000002658794567.png?HW-CC-KV=V1&HW-CC-Date=20260709T133747Z&HW-CC-Expire=86400&HW-CC-Sign=A3E029900F8E6DDF057075C1C02B468B8EFE5E9F9E9F47D288E61CB9A5292E53 "点击放大")
    
    综上可知在手指离开屏幕后，应用网页有触发网络请求进行验证，然后延迟1.5s后才隐藏图片验证码，导致验证慢的问题。
    

#### 分析结论

在移动滑块拼图验证时执行了延迟操作，等待一段时间才隐藏图片验证码，引起拼图验证慢的问题。

#### 修改建议

1.  减少计时器的超时时长。
2.  添加验证过程中的状态提示。