遅延読み込みスクリプト

このWebサイトの検索機能に必要なスクリプトは、検索バーがフォーカスされている場合にのみロードされます。 このように、それらは検索機能を使用することを決定した人々のためにのみロードされ、帯域幅とページの重みを大幅に減らすことができます。 結局、訪問者のごく一部しか検索を使用しないのに、なぜ毎回費用がかかるのでしょうか。

この単純な遅延読み込み手法を実現するために、最初に呼び出す関数を定義しましょう。 loadScript:

function loadScript(url) {
  let isLoaded = document.querySelectorAll('.search-script');
  if(isLoaded.length > 0) {
    return;
  }

  let myScript = document.createElement("script");
  myScript.src = url;
  myScript.className = 'search-script';
  document.body.appendChild(myScript);
}

この関数は、最初にスクリプトがすでにロードされているかどうかをチェックします。ロードされている場合は、スクリプトを複数回ロードしようとするのではなく、単に戻ります。 次に、次のスクリプト要素を作成します。 document.createElement、渡されたURLを src 属性の値として指定し、チェックが機能するようにクラス名を指定してから、この新しいscript要素をbody要素に追加します。 。

---

最後のステップは、検索入力でイベントリスナーを設定し、 loadScript スクリプトへのURLで関数：

var searchInput = document.querySelector('.algolia__input');
searchInput.addEventListener('focus', function(e) {
  loadScript('/path/to/search-script.js');
});

明らかに、これは、理論的には、検索ボックスにフォーカスしてからスクリプトを使用できるようになるまでに短い遅延があることを意味します。 ほとんどの場合、問題はありません。この場合、スクリプトが完全にロードされるとすぐにリアルタイム検索が開始されます。