美文网首页
iOS H5通过js获取设备运动数据卡顿问题记录

iOS H5通过js获取设备运动数据卡顿问题记录

作者: 林大鹏 | 来源:发表于2023-06-07 20:39 被阅读0次

一. 问题背景

因为H5iOS13以下系统通过web api来获取设备运动数据,会有授权弹框,体验不好,因此决定通过jsApp获取设备运动数据。

H5通过下发js命令给App,App 通过CMMotionManager获取deviceMotion运动信息,然后回调给H5去更新晃动动画效果。

但兼容性测试的时候,发现在iPhone 6s等性能较差的设备上,会导致H5滑动卡顿。

二. 问题排查

经断点调试发现,当出现H5滑动卡顿, Xcode控制台会输出:

iOS [IPC] Connection::waitForSyncReply: Timed-out while waiting for reply, id = 81

从这个提示可以推测,很有可能是App通过CMMotionManager获取deviceMotion运动数据,需要跨进程通讯,去操作系统里面读取设备运动数据。

image.png

App通过js将设备运动数据回调给WKWebView,因为WKWebView内部是多进程组件,App内部的WKWebView对象,需要将数据提交给WKWebView处理进程,这里也涉及到了进程间通讯导致等待同步应答时间超时。

为了证实猜测,分别将CMMotionManager获取deviceMotion获取运动数据操作和App通过js将设备运动数据回调给WKWebView,独立进行测试,发现在iPhone 6s等性能较差的设备上,H5滑动并未出现卡顿。因此进一步证明了推测。

既然两者结合在一起才会在低版本机型上导致H5滑动卡顿问题。

那是否有其他方法可以尝试下呢?

我们这边可以看到我们用的是CMMotionManagerstartDeviceMotionUpdates自动回调的方法。

    /*
     *  startDeviceMotionUpdatesToQueue:withHandler:
     *
     *  Discussion:
     *    Starts device motion updates, providing data to the given handler through the given queue.
     *    Uses the default reference frame for the device. Examine CMMotionManager's
     *    attitudeReferenceFrame to determine this.
     *
     */
    open func startDeviceMotionUpdates(to queue: OperationQueue, withHandler handler: @escaping CMDeviceMotionHandler)

这里还有另外一种方式,就是自己通过业务侧的定时器,定时去读取设备运动数据。

因此改用业务侧自己的定时器来定时读取设备运动数据:

image.png

经测试发现,在业务侧自己设置定时去读取设备的运动数据,在iPhone 6s等性能较差的设备上,H5滑动并未出现卡顿。是可以完美解决问题的。

三. 原因分析

为什么通过设置CMMotionManagerdeviceMotionUpdateInterval回调时间,然后开启设备监听d的回调方法startDeviceMotionUpdates(to queue: OperationQueue, withHandler handler: @escaping CMDeviceMotionHandler),去回调相关设备数据给H5iPhone 6s等性能较差的设备上,H5滑动会出现卡顿。

但在业务侧自己用定时器,定时去读取就不会。

按道理系统设置定时回调间隔,然后定时回调数据,跟业务侧自己用定时器,定时去读取设备运动数据。两者逻辑是一致的。

因此查找了一些相关的资料,但并没有找到相关的确定的描述。

因此这里也是一个自己的推测:

就是系统CMMotionManagerstartDeviceMotionUpdates(to queue: OperationQueue, withHandler handler: @escaping CMDeviceMotionHandler),可以是一个跨进程的频繁的读取操作,而

deviceMotionUpdateInterval回调时间,只是设定了间隔多久再回调数据。

而业务侧自己设置定时器,定时去读取,是只是到了定时时间,才去跨进程读取设备运动数据。因此业务侧定时读取,跨进程读取的频率相对低很多。

四. 解决方案

  • 改用业务侧自己的定时器来定时读取设备运动数据
image.png

相关文章

  • 渲染 Rendering

    在进行iOS的性能优化中,会碰到卡顿的问题,虽然iOS设备的性能越来越高,但是卡顿的问题还是有可能会出现,而离屏渲...

  • iOS离屏渲染之优化分析

    在进行iOS的应用开发过程中,有时候会出现卡顿的问题,虽然iOS设备的性能越来越高,但是卡顿的问题还是有可能会出现...

  • iOS离屏渲染之优化分析

    在进行iOS的应用开发过程中,有时候会出现卡顿的问题,虽然iOS设备的性能越来越高,但是卡顿的问题还是有可能会出现...

  • 浏览器通过js异步获取数据

    浏览器通过js异步获取数据 浏览器通过js异步获取数据

  • ios 的离屏渲染

    在进行iOS的应用开发过程中,有时会出现卡顿的问题,虽然iOS的设备性能越来越高,但是卡顿的为题偶尔还是会出现,而...

  • iOS获取SIM卡信息(判断设备是否安装SIM卡)

    引用: 一、判断设备是否安装SIM卡: 二、获取sim卡信息 运行结果: 附:iOS获取硬件信息

  • iOS开发 与H5进行交互

    1. H5调用 iOS 调用 接收 2. iOS调用 H5 直接 load 通过 JS 3. 发消息 4. 参数 ...

  • h5页面 判断网页在哪打开

    获取浏览类型与系统的函数 前端H5用js判断页面在IOS,Android,微信,pc端打开的方法 js判断H5页面...

  • Android WebView支持定位

    问题描述 部分H5界面会通过JS代码获取位置信息,这个界面在手机浏览器上能正常获取到位置,但是通过WebView打...

  • iOS H5页面中请求重定向(302)问题

    使用WKWebView 问题描述:iOS 通过WKWebView加载H5页面,H5页面中发送了post请求数据(此...

网友评论

      本文标题:iOS H5通过js获取设备运动数据卡顿问题记录

      本文链接:https://www.haomeiwen.com/subject/moogedtx.html