收藏
回答

小程序调用boundingClientRect等获取元素位置信息很慢

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug boundingClientRect 微信iOS客户端 6.6.6 1.9.93

如题,我要实现一个sticky组件,需要在onPageScroll中调用boundingClientRect获取元素的位置信息,但是

现在有一个问题:

如果页面慢慢滚动的话,能在4ms内获取到元素位置信息,看起来过渡就很流畅;

而如果一下子将页面滚动到顶部或者底部(页面到头后会超出可滚动区域然后回弹一下),这个时候获取位置信息就会很慢,平均500ms,有时候是1700ms,这会导致过渡的时候有一个卡顿。


下图console中打印的是我滚动页面时,每次调用boundingClientRect前和执行boundingClientRect的回调函数之间的时间差,可以看到,有时候很快(2、30、80ms),有时候就很慢(315、1367、1900ms)。




我已经给onPageScroll事件设置了debounce,保证滚动结束后100ms后才调用boundingClientRect



我上传了一个代码片段,复现步骤是:滚动的稍微慢点,或者特别快(我也不知道具体是什么情况下)多试试。它有时候获取得很快,都在10ms内:




有时候就获取得很慢,是1000ms以上:



请问这是什么原因?

最后一次编辑于  2018-05-25
回答关注问题邀请回答
收藏

4 个回答

  • Images.
    Images.
    2018-06-16

    没有解决,开发者工具上依然很卡。我感觉这个情况出现是不确定的,在开发者工具上经常出现,但是在真机上会好很多,只会偶尔出现。


    我后来参考 touch-ui 的 sticky 实现方式实现了吸顶效果,真机体验不错,能够接受。


    2018-06-16
    赞同
    回复
  • 春如旧
    春如旧
    2018-06-05

    解决了吗

    2018-06-05
    赞同
    回复 7
    • Images.
      Images.
      2018-06-16

      没有解决,开发者工具上依然很卡。我感觉这个情况出现是不确定的,在开发者工具上经常出现,但是在真机上会好很多,只会偶尔出现。


      我后来参考 touch-ui 的 sticky 实现方式实现了吸顶效果,真机体验不错,能够接受。

      2018-06-16
      回复
    • 春如旧
      春如旧
      2018-06-16回复Images.

      代码片段能分享一波吗

      2018-06-16
      回复
    • Images.
      Images.
      2018-06-16回复Images.

      wechatide://minicode/mCdQCdmN77Cu


      我在 iPhone 5S 测试了,没有问题。

      2018-06-16
      1
      回复
    • Images.
      Images.
      2018-06-16回复春如旧

      有bug麻烦和我说一下~

      2018-06-16
      回复
    • 方琦
      方琦
      2018-07-09回复Images.

      VM1237:formatted:320 An SelectorQuery call is ignored because no proper page or component is found. Please considering using `SelectorQuery.in` to specify a proper one.

      控制台报错

      2018-07-09
      回复
    查看更多(2)
  • Matthew
    Matthew
    2018-06-01

    遇到了相同的问题 关注

    2018-06-01
    赞同
    回复
  • Journey。
    Journey。
    2018-05-29

    mark 关注一下

    2018-05-29
    赞同
    回复