精华内容
下载资源
问答
  • NULL 博文链接:https://mft.iteye.com/blog/2115470
  • 谷歌推送延迟解决方案,解决国内使用谷歌推送服务严重延迟问题
  • 移动端点击300ms延迟问题解决

    万次阅读 多人点赞 2017-03-14 17:48:42
    今天屁颠屁颠写完了,手机端做测试时,点击,发现有延迟,就百度了下,原来这就是传说中的300ms延迟啊,百度了点资料,记录下,解决项目中这个小问题! 一、移动端300ms点击延迟 一般情况下,如果没有经过...

    今天屁颠屁颠写完了,手机端做测试时,点击,发现有延迟,就百度了下,原来这就是传说中的300ms延迟啊,百度了点资料,记录下,解决项目中这个小问题!

    一、移动端300ms点击延迟

    一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。在移动WEB兴起的初期,用户对300ms的延迟感觉不明显。但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受。

    那么,移动端300ms的点击延迟是怎么来的呢?

    问题由来
    这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题。

    这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因。

    双击缩放,顾名思义,即用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢? 假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕。 鉴于iPhone的成功,其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定,包括双击缩放,几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面,在欣喜的时候往往不会care这个300ms的延时问题,可是如今touch端界面如雨后春笋,用户对体验的要求也更高,这300ms带来的卡顿慢慢变得让人难以接受。

    也就是说,移动端浏览器会有一些默认的行为,比如双击缩放、双击滚动。这些行为,尤其是双击缩放,主要是为桌面网站在移动端的浏览体验设计的。而在用户对页面进行操作的时候,移动端浏览器会优先判断用户是否要触发默认的行为。

    那有什么办法可以解决这个问题呢?

    浏览器开发商的解决方案

    浏览器开发商要对移动端浏览器本身的设计进行改善,以提供长远的解决方案。

    目前,浏览器开发商的解决方案主要有一下三种方案:
    方案一:禁用缩放
    当HTML文档头部包含如下meta标签时:

    <meta name="viewport" content="user-scalable=no">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1">

    表明这个页面是不可缩放的,那双击缩放的功能就没有意义了,此时浏览器可以禁用默认的双击缩放行为并且去掉300ms的点击延迟。
    这个方案有一个缺点,就是必须通过完全禁用缩放来达到去掉点击延迟的目的,然而完全禁用缩放并不是我们的初衷,我们只是想禁掉默认的双击缩放行为,这样就不用等待300ms来判断当前操作是否是双击。但是通常情况下,我们还是希望页面能通过双指缩放来进行缩放操作,比如放大一张图片,放大一段很小的文字。

    方案二:更改默认的视口宽度
    一开始,为了让桌面站点能在移动端浏览器正常显示,移动端浏览器默认的视口宽度并不等于设备浏览器视窗宽度,而是要比设备浏览器视窗宽度大,通常是980px。我们可以通过以下标签来设置视口宽度为设备宽度。

    <meta name="viewport" content="width=device-width">

    因为双击缩放主要是用来改善桌面站点在移动端浏览体验的,而随着响应式设计的普及,很多站点都已经对移动端坐过适配和优化了,这个时候就不需要双击缩放了,如果能够识别出一个网站是响应式的网站,那么移动端浏览器就可以自动禁掉默认的双击缩放行为并且去掉300ms的点击延迟。如果设置了上述meta标签,那浏览器就可以认为该网站已经对移动端做过了适配和优化,就无需双击缩放操作了。
    这个方案相比方案一的好处在于,它没有完全禁用缩放,而只是禁用了浏览器默认的双击缩放行为,但用户仍然可以通过双指缩放操作来缩放页面。

    方案三:CSS touch-action
    网上很多文章把这个方案归结为指针事件,这令我很疑惑。

    以我的理解来看,指针事件的提出并不是为了解决300ms点击延迟的,而是为了使用一个单独的事件模型,对鼠标、触摸、触控等多种输入类型进行统一的处理。也就是说,移动浏览器不用再为不同的输入设备设计不同的事件,网页的开发者也不用再为不同输入类型的设备写不同的事件响应代码,而是通过统一的指针事件就可以开发出跨不同输入类型终端的应用。

    跟300ms点击延迟相关的,是touch-action这个CSS属性。这个属性指定了相应元素上能够触发的用户代理(也就是浏览器)的默认行为。如果将该属性值设置为touch-action: none,那么表示在该元素上的操作不会触发用户代理的任何默认行为,就无需进行300ms的延迟判断。

    而设置这个CSS属性与否,指针事件应该都是可以工作的。所以,网上的文章令我很疑惑,希望有大神能给我指示~ 。。~

    现有的解决方案

    要解决300ms点击延迟的问题,从长远来说,自然还是得浏览器开发商提供统一的最终的解决方案。但是,到目前为止,以上三种方案并不能提供很好的兼容性,对于方案一和方案二,Chrome是率先支持的,Firefox紧随其后,然而令Safari头疼的是,它除了双击缩放还有双击滚动操作,如果采用这种两种方案,那势必连双击滚动也要一起禁用;对于方案三,IE是支持的,但是其他浏览器支持不完善。具体请看这篇文章:移动端Click300毫秒点击延迟的来龙去脉(转)

    所以,在浏览器开发商最终统一的解决方案出来之前,我们还有一些基于Javascript的现成的解决方案可以用。

    方案一:指针事件的polyfill
    现在除了IE,其他大部分浏览器都还不支持指针事件。有一些JS库,可以让我们提前使用指针事件,比如

    然而,我们现在关心的不是指针事件,而是与300ms延迟相关的CSS属性touch-action。由于除了IE之外的大部分浏览器都不支持这个新的CSS属性,所以这些指针事件的polyfill必须通过某种方式去模拟支持这个属性。一种方案是JS去请求解析所有的样式表,另一种方案是将touch-action作为html标签的属性。

    方案二:FastClick
    FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后的click事件阻止掉。

    二、点击穿透问题

    说完移动端点击300ms延迟的问题,还不得不提一下移动端点击穿透的问题。可能有人会想,既然click点击有300ms的延迟,那对于触摸屏,我们直接监听touchstart事件不就好了吗?
    使用touchstart去代替click事件有两个不好的地方。
    第一:touchstart是手指触摸屏幕就触发,有时候用户只是想滑动屏幕,却触发了touchstart事件,这不是我们想要的结果;
    第二:使用touchstart事件在某些场景下可能会出现点击穿透的现象。

    什么是点击穿透
    假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。

    这是因为在移动端浏览器,事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟,当touchstart事件把B元素隐藏之后,隔了300ms,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。


    展开全文
  • 无人机正确连接手机,实现推流功能,推流后测试发现视频延迟高达十几秒。 问题分析 使用DJI LiveStreamManager接口推流可处理音视频流,音频流使用手机的MIC采集音频数据,需要添加手机音频权限。 解决方案: 在项目...
    /**
    * 只对作者个人理解的功能进行描述说明,参考官方说明文档
    * 需要其他功能教程或说明请留言或私信
    * 需要其他合作请留言或私信
    * auth by antman-s
    */
    

    问题描述
    无人机正确连接手机,实现推流功能,推流后测试发现视频延迟高达十几秒。

    问题分析
    使用DJI LiveStreamManager接口推流可处理音视频流,音频流使用手机的MIC采集音频数据,需要添加手机音频权限。

    解决方案
    在项目AndroidMenifest中添加权限,并动态赋予录音权限

        <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    
    展开全文
  • 解决手机端H5页面中keyup延迟问题 项目开发过程中,需要在keyup方法中使用aja动态x获取后台数据;然鹅,在此过程中会发现keyup延迟现象,这就涉及到键盘数字的显示速度快于ajax响应速度,这里说的就是解决这个...

    解决在手机端H5页面中keyup延迟问题

    项目开发过程中,需要在keyup方法中使用aja动态x获取后台数据;然鹅,在此过程中会发现keyup延迟现象,这就涉及到键盘数字的显示速度快于ajax响应速度,这里说的就是解决这个问题的一个方法。当然,解决问题的方法有很多,鄙人不才,在此只列举一种,供大家参考:

    注意,timeStamp 事件属性可返回一个时间戳。指示发生事件的日期和时间(从 epoch 开始的毫秒数)。epoch 是一个事件参考点。在这里,它是客户机启动的时间。并非所有系统都提供该信息,因此,timeStamp 属性并非对所有系统/事件都是可用的。

    直接上代码

     //解决keyup延迟问题
      $("#pay_money").on("keyup",function(e){
          $this = $(this);
          last = e.timeStamp;            
          setTimeout(function(){ 
              var vall = $this.val(); 
              if(vall>0){ 
                  if(last-e.timeStamp===0){
                      $.post("{:U('Shop/do_pay_return')}",{money:vall,id:shop_id},function(data){
                          if(data.code!=1){
                              alert(data.info);
                          }else{ 
    
                              var ss = data.data.money+'元';
                              var ff = data.data.fan; 
                              $("#total_money").html(ss);
                              $("#total_jifen").html(ff);
                              $("#daizhifu").html(vall);
                              $(".xianjin>form>div:nth-child(2)").fadeIn();  
                          }
                      })
                  }
              }else{
                  $("#daizhifu").html(0);
                  $(".xianjin>form>div:nth-child(2)").css("display","none");
              }
          },200)
      })
    • 上面代码的作用就是通过获取用户输入的金额,ajax动态提交给后台,返回对应的奖励金额。通过事件发生前后的时间对比,然后设置延时操作,即可解决keyup交互时的延时问题。
      这里写图片描述
    • 上面(1)输入框输入金额,在(2)位置动态展示奖励金额,该js代码即可实现交互时输入数字时ajax延迟处理的问题,以及输入数字之后,再删除,会发现ajax未进行响应。
    展开全文
  • 1、vue项目搭建好后,下载第三方库 cnpm install fastclick --save ;保存依赖包; 2、在main.js里面引入 使用 import fastclick from"fastclick"; 3、fastclick.attach(document.body) 简单好用!...

    1、vue项目搭建好后,下载第三方库 cnpm install fastclick --save ;保存依赖包;
    2、在main.js里面引入 使用 import fastclick from"fastclick";
    3、fastclick.attach(document.body)
    简单好用!!!

    展开全文
  • 。。。
  • 1、游戏里画面设置: 配置不高的手机画质一般设置为流畅。配置帧数设置为超高,画质再不卡顿的...画质为超清,若有延迟改为高清。 3、散热方法: (1)手机支架+散热器。 (2)手机放冰袋上。 (3)方形的水瓶接水放冰箱冷...
  • 移动端浏览器点击事件300毫秒延迟问题的避免方法
  • 对于歌手而言,演出现场往往是个很大的空间,会有声音的延迟或变质,当歌手在现场演唱时往往听不到自己的声音,或者听到伴奏时已发生延迟,所以需要耳返把伴奏送到歌手耳边以保证他们不会唱错拍子或走音走调。...
  • 查了查资料,发现早在2007年,苹果为了解决在Iphone这种小屏幕浏览器站点的问题,就设置了300毫秒的延迟。这是为了系统判断用户是双击还是单击屏幕。 网上面有很多的解决方案,推荐一个比较好用,而且也是非常稳定...
  • 最近在开发中遇到了一些问题,发现iOS 10拨打系统电话发现弹出框会延迟2s左右出现,很不爽,研究了一下,发现是openURL在iOS 10及其之后会阻塞主线程 所以,拨打电话前,做个判断,下面话不多说了,来一起看看详细...
  • 大多数基于触摸的浏览器设备,在点击时都会有个 300ms 的事件触发等待时间,做过 web app 开发的同学应该都遇到过这个情况,通过下面的5步可以轻松搞定这个延迟。1、不要太纠结于此是否能接受这 300ms 的时间延迟,...
  • https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action
  • 如何降低蓝牙耳机与手机延迟

    千次阅读 2021-08-30 09:38:02
    这里写自定义目录标题关于如何降低蓝牙耳机与手机延迟蓝牙音频 关于如何降低蓝牙耳机与手机延迟 蓝牙音频
  • 延迟和抖动 延迟:是网络传输中的一个重要指标,测量了数据从一个端点到另外一个端点所需的时间。一般我们用毫秒作为其单位。通常我们也把延迟叫做延时,但是延时有时还会表示数据包发送端到接受端的往返时间。这个...
  • 手机端点击Tap基础事件解决300ms延迟

    千次阅读 2018-02-28 09:25:00
    点击Tap基础事件解决300ms延迟 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;...
  • aptX音频压缩编解码技术彻底颠覆了蓝牙立体声音响的聆听体验,可为蓝牙立体声耳机、各类音箱等消费电子应用设备提供高品质无线音频。
  • 移动端点击click事件会有300ms的延迟,而vue没有封装js的移动端tap事件,使用时,页面引用[removed][removed],通过,active:0}">全部</li> fn:vueTouch调用。
  • 树莓派做图像处理数据延迟问题解决方法 很早之前(2018年左右)在做一个当时风靡一时"跳一跳"小游戏的自动运行小工具时(树莓派通过摄像头获取手机屏幕图像,再驱动舵机云台去点击手机屏幕),就有发现树莓派在做图像...
  • 操作:手机管家>应用启动管理,找到微信,关闭“自动管理”,打开“手动管理”的三个开关“允许自启动”“允许关联启动”“允许后台活动”。 2、高耗电不要关闭微信后台运行 系统提示微信高耗电提醒时,不要将...
  • 解决ios的app内H5页面倒计时在锁屏后停止或延迟解决方案
  • 延迟敏感的用户,推荐使用flv,但是需要flash支持,手机端支持性较差。越来越多的客户即想要hls的便利性,又想要较低的延迟,本文记录了探索hls低延迟的一些尝试。 1. HLS的特性 HLS (HTTP Live...
  • 自从iPhone取消掉3.5mm耳机孔后,安卓阵容也接着跟风取消掉耳机孔了,虽然AirPos体验非常不错,安卓各大厂商也出了很多蓝牙耳机来解决取消掉耳机孔带来的不便利问题。但是蓝牙耳机先天性的延时问题,在玩游戏或者看...
  • ethermine延迟高通过端口转发降低延迟解决方案

    千次阅读 热门讨论 2021-11-20 22:58:38
    方案优势: ...ethermine等虽然它们也会提供亚洲节点,但是基本上是在新加坡,哪怕是部署在香港的,如果不是CN2回国线路的,也会出现延迟剧增的现象,常见的延迟一般是180-200ms,部分地区甚至高达200-300ms
  • 解决谷歌gcm推送服务延迟问题
  • 游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应。 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了。才发现是因为...
  • 我们的项目之前使用FMOD移植到Android平台上时,有非常严重的延迟问题,之后通过更新新插件版本以及针对个别手机进行特殊设置解决了音效的延迟问题。下面来讲述声音延迟问题的来源和相应设置。 问题描述 声音...
  • 目前直播行业的兴起(带货,游戏),网络卡顿以及延迟问题成为一个比较棘手的问题(目前很多主播用的都是手机直播,基本上都是用手机网络或者WiFi)毕竟再好的无线都避免不了网络延迟这一弊端,这样的话就会给观众...
  • 解决ios手机网页版点击事件缓慢的问题,使用方法: $(document).ready(function () { FastClick.attach(document.body); });

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 49,608
精华内容 19,843
关键字:

如何解决手机延迟的问题