preface

Recently, during the acceptance of a React project on mobile terminals, an optimization problem was mentioned, that is, the active state switch of the list is too slow, and there is no delay on Android and PC, but on ios, it is probably like this common list:

I searched for this phenomenon but found no result in our front-end discussion group. Two friends gave me the same solution: introduce react-fastclick:

import initReactFastclick from 'react-fastclick';
initReactFastclick();
Copy the code

The click delay on ios really disappeared with the introduction of install modules like this, but why? With curiosity, I checked a bunch of data and learned that this was caused by the 300ms delay of the legendary click event. (I heard about it later, but never encountered it or dealt with it, haha).

Why is there a 300ms delay for mobile click events

To put it simply, apple added a 300ms delay between the touchend and click events to determine whether the user is clicking or double-clicking.

Here’s what the Google Developer document says:

For many years, mobile browsers applied a 300-350ms delay between touchend and click while they waited to see if this was going to be a double-tap or not, since double-tap was a gesture to zoom into text.

What about the 300ms delay

  • fastclick

    It is the solution provided by our company’s partner that I mentioned at the beginning of the article, which is also a relatively simple and crude solution. Fastclick is a lightweight library designed to address the 300-millisecond click delay problem in mobile browsers. The principle of FastClick is that when a Touchend event is detected, a DOM custom event is immediately triggered to simulate a click event and the browser’s click event is blocked after 300ms.

  • Disable zooming You can fix the lag without adding FastClick by using the hack below

    • Applicable scenarios:
      • Chrome on Android (all versions)
      • IOS 9.3
    • Handling code
    <meta name="viewport" content="user-scalable=no" />
Copy the code

    This solution has been tested and works fine on higher versions of Android, but it depends on webView on ios. If you use UIWebView, there will still be a delay. If you use WKWebView, there will be no delay. WKWebView ios WKWebView want to know more about you can search, in short, the performance will be better than UIWebView a new WebView, proposed in ios 8, ios wechat terminal has been used by WKWebView.

Use the fastclick pit

I haven’t come across it yet because IT’s my first time using the library, but from what this article describes, I can guess what kind of scenarios are likely to crash, that is, pages are more complex, not just events with click events, as explained above.

conclusion

The solution I ended up choosing in my own project was to disable zooming, since our ios client just recently updated WKWebView, hahaha. This avoids unexpected potholes and introduces less code. On Android as long as we turn zooming off there’s no lag.

In the case of UIWebView scenarios, there is a high probability of a 300ms delay. If the page is not too complex, you can also introduce FastClick.

reference

  • Mobile 300ms click delay and click penetration
  • About the Fastclick.js disaster
  • 2019 mobile terminal 300ms delay and fastClick principle analysis