• 移动端300ms延迟原因及解决方案


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

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

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

    解决方案

    1. faskclick https://github.com/ftlabs/fastclick

    • 原理: 在检测到touchend事件的时候,会通过DOM自定义事件立即出发模拟一个click事件,并把浏览器在300ms之后真正的click事件阻止掉
    • 缺点: 脚本相对较大, 不建议使用

    2. 禁用游览器缩放

    当HTML文档头部包含如下meta标签时:

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

    3. 更改默认的视口宽度

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

    4.通过 touchstart 和 touchend模拟实现

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

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




  • 相关阅读:
    coding 绑定 ssh 公钥后 还报没有权限???
    定位方法 xpath,css
    css 定位方法
    pyse
    kafka自动安装脚本systemctl服务
    Visual Studio Code(VS Code)插件
    2022最新web前端面试题分享pdf 170页
    浏览器缓存机制介绍与缓存策略剖析
    前端性能优化攻略
    linux中用wget下载整个网页以及子网页
  • 原文地址:https://www.cnblogs.com/zhouyingying/p/10623596.html
Copyright © 2020-2023  润新知