InstantClick:Webサイトの応答性を改善するためのライブラリ

カーソルが要素上にある瞬間から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



イベント間の時間間隔を測定できます






All Articles