ホームページ > 記事 > ウェブフロントエンド > 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('send', 'pageview') */ InstantClick.on('change', function() { ga('send', 'pageview', location.pathname + location.search); }); InstantClick.init(); </script>
以上がInstantClick.js を使用して 200 ミリ秒でページを事前にロードする詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。