InstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例

この記事では、主に InstantClick.js を使用してページを 200 ミリ秒前にロードする方法を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。エディターをフォローして見てみましょう

前書き

Web サイトの読み込みを高速化する方法はたくさんあります。公式 Web サイトの英語ドキュメントを注意深く調べたところ、この InstantClick.js を見つけました。 InstantClick.js には非常に優れた実装アイデア (仕組み) があること。

訪問者がリンクをクリックする前 (ここで自分でテストしてください):

• ホバー (ホバー→クリックの間約 200 ミリ秒)

• マウスダウン (マウスダウン→クリック 約 100 ミリ秒)、

• タッチスタート携帯電話のタッチ

通常、これら 2 つのイベントの間には 200 ミリ秒の間隔があり、InstantClick はこの時間間隔を使用してページをプリロードします。このように、ページをクリックすると、ページは実際にローカルに読み込まれ、当然ながらレンダリングは非常に高速になります。

もちろん、InstantClick は Pjax:pushState と Ajax テクノロジーも使用しています

同時に試してみましたが、非常にうまく機能しました。ブログに Pjax を実装する必要がある場合は、InstantClick が適しています。

使い方

instantclick.js をダウンロードします。 instantclick.min.js はわずか 2.5Kb で、非常に小さいです

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

を使用してください 注:

• data-no-instant は、この JS が 1 回だけ実行されることを意味します。独自の JS に従って設定する必要があります。状況

• 不必要なプリロードを避けたい場合は、ホバーをオフにしてマウスダウンを有効にすることをお勧めします

エフェクトを表示します

Chrome コンソールを開いて、ホバーするたびに表示されるネットワーク ビューを表示します。最初にページをロードし、クリックすると結果ページを表示できます。

良いアニメーションソフトがないのでGIFアニメ表示はありません

Extension

InstantClickでも設定できるイベントがいくつか用意されています。

• change ページが変更されました。つまり、クリックで読み込みがトリガーされた後です。

• fetch ページのプリロードが開始されます。

• receive ページがプリロードされました。つまり、ホバーまたはマウスダウンによってプリロードがトリガーされますが、ユーザーが必ずしも

インスタンスをクリックするわけではないので、必ずしも変更されるわけではありません

ajaxを使用しているため、Google gaではPVがカウントされないため、変更方法を追加しました

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>
/* Google Analytics code here, without ga(&#39;send&#39;, &#39;pageview&#39;) */
 
InstantClick.on(&#39;change&#39;, function() {
 ga(&#39;send&#39;, &#39;pageview&#39;, location.pathname + location.search);
});
 
InstantClick.init();
</script>

以上がInstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。