click
イベントが発生するまで、Webページ上のリンクまたはボタンをクリックすると、通常は数百ミリ秒かかります。 まず、ユーザーはカーソルが正しい場所にあることを確認する必要があります-このプロセスには最も時間がかかります。 第二に、
click
イベントは、マウスボタンを離した後にのみトリガーされ、
click
後数十ミリ秒で発生します。 モバイルブラウザでは、タッチスクリーンがタッチされてから
click
イベントが発生するまでの間に300ミリ秒の遅延が設定され
click
これは、誤検知を防ぐために行われます。
InstantClickライブラリ(圧縮形式で1.6 kB、依存関係なし)を使用すると、
mouseover
イベントによって、カーソルがアクティブな要素上にある瞬間にサーバーから必要な情報の読み込みが開始されるため、クリックごとの知覚ページ応答時間を改善できます。 これにより、数百ミリ秒節約され、アプリケーションの反応はほとんど瞬時になります。
当然、クライアントインターフェイスを高速化するには、要素上でカーソルをクリックしない場合に、誤検知によるサーバーの負荷を増やすことで支払う必要があります。 この可能性を減らすために、InstantClickでは、操作にわずかな遅延を設定するか、まったくリスクを負わせずに、
mousedown
イベントを使用
mousedown
ます。 これは、メニューなど、多くのアクティブな要素が小さな領域に集中している場合に役立ちます。 さらに、InstantClickをアイテムごとに個別に有効または無効にすることができます。
コンテンツをロードするために、InstantClickはAJAXリクエストとpushStateを使用して、ブラウザーの履歴と戻るボタンが正常に機能するようにします。 このライブラリは、 jQuery-pjax (またはTurbolinks )とFastclickのアイデアを組み合わせたものと言えます。Fastclickとは異なり、モバイル用ではなくデスクトップブラウザ用です。 ただし、作成者は、タッチスクリーンを備えたデバイスの
touchstart
イベントのサポートを実装することを約束します。
プロジェクトのウェブサイトでライブラリがどのように機能するかを確認するには、ヘッダーのリンクをクリックします。 さらに、別のページで、 テストボタンをクリックしたときに
mouseover
、
mousedown
および
click
イベント間の時間間隔を測定できます 。