Mobile browser Chrome for Android removed 300ms click Delay

translate a useful article about 300ms delay in Mobile browser, the original address http://updates. Html5rocks.com/2013/12/300ms-tap-delay-gone-away        

Remove 300ms Click Latency on your mobile device browser

You can find a lot of articles on the website about reducing 10ms or 90ms in order to have a fast and smooth website user experience somewhere. Unfortunately, on a touchscreen-based cross-platform mobile browser, there is an artificial 300ms delay when touching or clicking on an object, which is 300ms after the browser is considered a click event.         This problem is one of the main culprits when people think that mobile Web applications are slower than native applications.        However, in Chrome for Android, it is now a beta version, and on websites optimized for mobile, this delay has been removed and still supports two-finger scaling! This optimization can be used on any website, just add the following sentence can be

<metaname="Viewport"content="Width=device-width"]]>

(or other meta-definitions equivalent to viewport <= device-width)

Why do click events have a 300ms delay?

If you visit a website that is not optimized for mobile devices, the browser shrinks the page so that you can see the entire width of the page, and in order to read the content, you can pinch to zoom, or double-click something to enlarge it. Double click is the performance killer, because each click we have to wait to know whether it is a double-click event, the wait time is 300ms, the following is the implementation process:1.Touchstart2.Touchend3.Wait 300ms in case of another tap4.ClickThis delay applies not only to JavaScript click events, but also to other click-based user interactions, such as links and form controls. You cannot simply cancel this delay via the touchend listener, compared to the following example in a mobile browser other than chrome 32using click events using Touchend eventsClick the row to change its color. The touchend implementation is faster, but still triggers a delay when the browser scrolls the page. This is because the specification does not define what can be canceled in the touch event process. The latest version of IOS Safari, Firefox, IE, and older versions of Android browser triggered touchend after the page was scrolled, and Chrome won't.

Microsoft's pointerevents spec did the right thing by stipulating that Pointerup not be triggered when the underlying event, such as page scrolling, occurs. However, currently IE only supports mouse events, although Chrome has made a proposal for this issue. Even so, 300ms latency is canceled only on all links, form elements, and JavaScript interactions that use the listener's Web site. How does Chrome get rid of 300ms latency? the Android version of Chrome and Firefox has removed the 300ms latency of the tap event for the page that added the following meta

<metaname="Viewport"content="Width=device-width, User-scalable=no"]]>

The Web page that added this meta cannot be scaled, so double-clicking scaling is no longer an available user interaction, so there is no need to wait for a double-click. However, we also lost the two Finger pinch zoom function.
when we look at photos, some small text, or handle some buttons or links next to each other, the two-finger zoom function is useful. This is an out-of-the-box ease of use feature.
If a Web site adds a
<metaname="Viewport"content="Width=device-width"]]>

..... A bit is scaled when you double-click. is not particularly noticeable in quantity. Double-clicking will change back to the original. We found this feature to be of no use to mobile-optimized websites, so we deleted it! This means that we can directly consider the tap event to be the same as the Click event, but we retain two-finger scaling (retain pinch-zooming).

can this change be used now?We don't think so, so we've released the Chrome beta version that includes this feature so that users can experience new features and give us feedback.
We imagined that this feature would affect the user's scene:
has a direct negative impact on the double-click event Multitouch operation that is not pinch-scaled in the same position on the page
For mobile-optimized sites, there is a slight visual impact of canceling a double-click event
But these 2 questions can be set with chrome settings inside the Font size Settings tool, and all over the app and webpage of the Android Magnifier solution, Magnifier can be used three times tap trigger.

In any case, we may overlook some of the problems, if you are affected by this change, please let us know by comments or bills of lading.
will other browsers do the same?
I don't know, but I hope they do the same.
Firefox has a bug list for this issue and has now avoided 300ms latency on pages that cannot be scaled.
On iOS Safari, Double-tap is a scrolling gesture on pages that cannot be scaled. Therefore, 300ms delay is also removed. They don't want to get rid of it on a page that can be scaled.

Windows phone still retains 300ms latency on non-scalable web pages, but does not offer a replacement gesture like iOS, so you can remove the 300ms delay like chrome, you can use the following CSS to remove the delay

HTML {    -ms-touch-action:manipulation;    Touch-action:manipulation;}

Unfortunately, this is an extension of Microsoft for pointer event standards. Developers can choose to use the code above to handle 300ms latency on Windows Phone browsers, and Chrome's modifications can speed up all sites optimized for mobile devices.

at the same time there are some other solutions ...
Fastclick by FT Labs use the touch event to trigger a quick Click and remove the double-tap gesture, which is achieved by judging the finger movement distance of the touch start and touched events.
Adding a Touchstart listener to any element has a performance impact because the underlying interaction such as page scrolling will be called by the listener to delay, fortunately, if the browser has disabled 300ms latency, Fastclick will avoid setting up listeners, so you can enjoy the benefits of both.