スマートフォンwebのタップイベントを高速化するライブラリ"fastclick.js"をさわってみた
先日参加したADC MEETUP ROUND 07での@akb7_jpさんのセッション「HTML アプリケーションのパフォーマンスを良くする 10 のポイント」にて、"fastclick.js"というタップイベントを高速化するツールの話があって試してみたのでここに書いておきます。
今回のエントリは、そのセッションのレポートというよりかは、あくまで自分が認識した内容となっていますのでそこらへんはあしからず。
パフォーマンスを良くする10のポイントのうちの１つに「#6 クリックイベントは使わない」という項目がありました。これはどういうことかというと、スマートフォンwebにおけるタッチイベントは"onclick"ではなく"ontouchstart"を使ったほうがレスポンスが早く、ユーザビリティが向上するという話でありました。
それもそのはず、"onclick"ではダブルクリックかを判定するために300msほど待ってからイベントを発火するという処理を行っているようなので、理屈ではありますね。
確かに試してみたところ、明らかにontouchstartのほうがレスポンスが早くてユーザビリティが良いように思われます・・・が、大抵のスマートフォンwebサービス（ネイティブだろうがwebだろうが）ではイベントの発火タイミングにontouchstartにあたるものは採用されていないように思います。
というのも、「誤ってあるボタンにタップしてしまっても、そのボタンから指をずらして離すことで、イベント発生をキャンセルすることができる」というのがタッチデバイスでのユーザビリティの原則だから、というのが持論です。実際に自分はこのような方法でスマートフォンを操作しています。
ここで、"fastclick.js"です。イベントの発火タイミングについては"onclick"同様ですが、通常のよりも高速になります。
以下にサンプル置いておきました。スマートフォンで確認ください。
それぞれの画像をタップするとalertがあがります。
左から"onclick", "ontouchstart", fastclickをattachした"onclick"になります。
導入にあたっての注意点などはもう少し調べてみようと思います。
