标签：android style blog http java color
翻译一篇关于移动浏览器300ms延迟的有用文章，原文地址 http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
你可以在网站上找到很多关于在为了快速流畅的网站用户体验，在某个地方减少10ms或90ms的文章。不幸的是，在基于触屏的跨平台移动浏览器上，触碰或点击一个物体时有一个人为的300ms延迟，即300ms后浏览器才认为是一个点击事件。当人们认为移动Web应用比原生应用慢时，这个问题是罪魁祸首之一。 然而， 在Chrome 32 for Android中，现在它还是测试版本，在为移动优化过的网站上，这个延迟已经去掉了，并且仍然支持两指缩放！ 这个优化可以用在任何网站上，只要加上下面一句就可以了
<meta name="viewport" content="width=device-width"]]>如果你访问一个没有为移动设备优化的网站，浏览器会缩小页面以便你能看到整个页面宽带，为了阅读内容，你可以捏缩放，或者双击某些内容放大。双击就是性能杀手，因为每次点击我们必须等待，以便知道它是否是一个双击事件，等待时间是300ms，下面是实现过程： 1.touchstart 2.touchend 3.Wait 300ms in case of another tap 4.click 这个延迟不但应用到了javascript的点击事件，而且应用到了其它基于点击的用户交互，例如链接和表单控件。 你不能简单的通过touchend监听器取消这个延迟，在Chrome 32以外的其它移动浏览器对比下面的例子 Using click events Using touchend events 点击行会改变它的颜色。touchend实现的例子更快，但是但浏览器滚动页面时仍然会触发延迟。这是因为W3C规范并没有定义在touch事件流程中什么可以取消。最新版本的 iOS Safari, Firefox, IE, 和旧版本的Android Browser在页面滚动后触发touchend，而Chrome不会。
Microsoft‘s PointerEvents spec 做了正确的事情，规定当底层的事件（例如页面滚动）发生时pointerup不被触发。然而，目前IE只支持鼠标事件，虽然Chrome针对这个问题做了提案。即使这样，300ms延迟也只在所有链接，表单元素和javascript交互都使用了这个监听器的网站上才被取消了。 Chrome是怎样去掉300ms延迟的？ Chrome和Firefox的android版本已经为添加了下面的meta的网页去掉了tap事件的300ms延时
<meta name="viewport" content="width=device-width, user-scalable=no"]]>
…双击时会缩放一点。不是特别明显的数量。再双击一下会变回原样。我们发现这个特性对移动优化的网站来说没有什么用处，所以就删除了它！这意味着我们可以直接认为tap事件和click事件一样，但是我们保留了二指缩放（retain pinch-zooming）。
Windows Phone仍然在不可缩放的网页上保留了300ms延迟，但没有像iOS那样提供了替换的手势，因此以后可以像Chrome那样去掉300ms延迟，你可以使用下面的css去掉延迟
html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}移动浏览器Chrome 32 for Android去掉了300ms点击延迟,布布扣,bubuko.com
移动浏览器Chrome 32 for Android去掉了300ms点击延迟
标签：android style blog http java color
原文地址：http://blog.csdn.net/offbye/article/details/36888397
