JavaScript の遅延読み込みについて詳しく見る

この記事では、Web 上で遅延読み込みがどのように機能するかを見ていきます。ネイティブの遅延読み込み API、遅延読み込みの実装方法、遅延読み込みの重要性と利点、最後に Web コンテンツの遅延読み込みの簡単な使用例について説明します。

遅延読み込み API とその仕組みを理解することは、これらの手法を実装するライブラリやフレームワークをすでに使用している開発者が内部で何が起こっているかを理解するのに役立ちます。さらに、独自の遅延読み込みライブラリを実装する予定がある場合は、よりガイド付きの調査を実行し、学んだテクニックを適用することができます。

実際の使用例では、プラットフォーム上の広告から収益を上げているマーケティング会社や広告会社は、遅延読み込みを簡単に最適化および適用して、プラットフォームにアクセスするユーザーにどの広告が表示されているかを簡単に判断できるため、より適切なビジネス上の意思決定を行うことができます。

推奨チュートリアル: 「JavaScript ビデオ チュートリアル 」

遅延読み込みとは何ですか?

Based Wikipedia によると、遅延読み込みは、必要なときに要素またはオブジェクトの初期化を遅らせるために使用される設計パターンです。これは、ユーザーが Web ページをスクロールした場合にのみ、ターゲット DOM 要素がロードされ、親 DOM 要素を基準にして表示されることを意味します (2 つの要素間に交差がある場合は、設定されたしきい値に基づいて)。

このパターンを採用しない場合、次のような欠点が生じる可能性があります。

• 1 つ以上のソースまたはバッチから複数の画像やその他の Web リソースを取得するための複数の同時ネットワーク リクエストが原因

• #ダウンロード/取得するパッケージのサイズにより、ページの読み込み時間が増加します。

• ユーザー維持率が低く、主にインターネット接続が不十分な地域に適しています。私たち開発者が早い段階で遅延読み込みを実装しないという間違いを犯すと、画像や iframe などのリソースやアセットの不適切な処理が原因で、ユーザーがプラットフォームの使用を完全に回避してしまうことは珍しくありません。 Web のパフォーマンスとアクセシビリティに多大な影響を与える

• 現在、最新および新しいブラウザーのほとんどは、Web での遅延読み込みをサポートしています。ただし、このサポートをまだ提供していないブラウザの場合は、このテクノロジーを実装する shim またはライブラリがその上に単純な API レイヤーを提供します。

遅延読み込みは、ページの初期読み込み時間を短縮するという問題を解決します。ユーザーが Web ページを初期化するとき、およびその後ページをスクロールするときに表示する必要がある画像やその他のコンテンツなどのリソースのみを表示します。 。

ご存知のとおり、Web のパフォーマンスとアクセシビリティの問題は多面的であり、ページ サイズ、メモリ フットプリント、および一般的な読み込み時間を削減することで、Web プラットフォームに大きな効果をもたらすことができます。遅延読み込みの利点は、大量の画像やビデオがあり、ブラウザー DOM の初期化時にそれらをすべて一度に読み込む場合に明らかになります。

もちろん、先ほど説明したように、これがどのような結果をもたらすかは理解しているはずです。

データによると、ほとんどの Web サイトは、対象ユーザーに情報を配信するために画像やその他の Web コンテンツ (ビデオや iframe など) に大きく依存しています。これは些細で単純なことのように思えるかもしれませんが、このコンテンツをユーザーに表示する方法が最終的にプラットフォームのパフォーマンスを決定します。

さらに、ページの読み込み時間の最適化に役立つアクション (ユーザーがページの特定の部分にスクロールするかどうかに依存するイベントなど) も、遅延読み込みの使用例の一部です。この記事を読み進めるにつれて、実際の設定における他の使用例についてさらに詳しく学んでいきます。

ネイティブ遅延読み込み API

遅延読み込みは、Intersection Observer API (交差点オブザーバー API) 上に構築されており、Intersection Observer API を検出または検出する方法を提供します。場合によっては、ターゲット (親要素) と呼ばれる要素がブラウザのビューポート内でいつ利用可能になるか、表示されるかを知ることができます。 これが発生すると、コード ロジックの他の部分の処理を支援するためにハンドラー関数が呼び出されます。これについては後で説明します。

この新しく改良されたブラウザ API を使用すると、2 つの DOM 要素が交差するとき、つまりターゲット DOM 要素がブラウザのビューポートに入ったとき、またはブラウザのビューポートと接触したときを知ることもできます。別の要素と交差 (おそらくその親です）。

遅延読み込みの仕組みをより深く理解するには、まず交差点オブザーバーの作成方法を理解する必要があります。交差点オブザーバーを作成するには、交差点オブザーバー イベントの発生をリッスンし、そのようなイベントが発生したときに実行するコールバック関数またはハンドラーをトリガーするだけです。

交差点オブザーバー イベントは、DOMContentLoaded イベントを含むドキュメント イベント カテゴリに似たブラウザ イベントです。

注: 交差イベントの場合、交差を適用する要素を指定する必要があります。この要素はルート要素と呼ばれることがよくあります。ただし、ルート要素が指定されていない場合は、ブラウザ ウィンドウ全体をターゲットにすることを意味します。

さらに、必要に応じて交差部分で形状やサイズを簡単に変更できるように、ルート要素 (指定されている場合) に空白を指定する必要があります。よりよく理解するために例を見てみましょう:

let options = {
root: null,
rootMargin: 10px,
threshold: 1.0
}

let observer  = new IntersectionObserver (options, callback);

上記のコード スニペットでは、オブザーバーを作成するための簡単な使用例が示されています。 optionsObject は、ターゲットのカスタム プロパティを定義するのに役立ちます。

ここで、options オブジェクトの threshold 属性は、コールバックがいつトリガーされるかを示します。デフォルト値は 0 です。これは、ユーザーがターゲット要素に近づき、それが表示されると、コールバックがトリガーされることを意味します。

一方、ルート要素は、Web ページをスクロールするときにユーザーに表示されるときに、ターゲット要素のビューポートとして機能する親要素です。 root が空に設定されている場合、親要素が自動的にビューポートになることに注意してください。

最後に、rootMargin は、ルート要素の周囲のマージンを設定するのに役立ちます。たとえば、ターゲット要素と親要素/ビューポートの間の交差を計算する前に、ターゲット要素のサイズ、マージン、または寸法を調整する必要がある場合があります。

また、2 つの入力パラメーターを受け入れるコールバックには、ターゲット要素とコールバックを呼び出すオブザーバーに適用する intersectionObserverEntry オブジェクトのリストが含まれています。

コールバックの署名は次のとおりです。

let callback = (entries, observer) => {
entries.forEach(entry => {
If (entry.isIntersection) {
// do some magic here
}
// and some other methods
})
}

intersectionObserverEntry オブジェクトは、親要素とターゲット要素の間に交差があることを示します。 API には、isIntersection、intersectionRatio、intersectionRect、target、time などの多数のプロパティがあります。 、待って。

特定の DOM 要素をターゲットにし、それが親要素と交差したときにコールバック関数をトリガーする必要があります。ターゲット DOM 要素の例を次のコード スニペットに示します。

let target = document.querySelector("#targetElement");

上記のコード スニペットでは、ターゲット要素を作成し、それに変数を割り当てました。その後、次のように、intersectionObserver コンストラクター/関数シグネチャの Observer メソッドを使用して、ターゲット要素を監視します。

// start observing for changes on the target element
observer.observe(target);

ターゲットに対してオブザーバーによって設定されたしきい値に達すると、コールバックがトリガーされます。

最後に、observe() メソッドは、どのターゲット要素を観察するかをオブザーバーに伝えます。交差点オブザーバーの API には多数のメソッドがあることに注意してください。unObserve()、takeRecords()、observe() などがその例です。

遅延読み込みテクノロジの利点

ここで、Web コンテンツとアセットの遅延読み込みがなぜ必要なのかをよりよく理解する必要があります。このテクノロジーを使用することのさらなる利点を見てみましょう:

• アクセス性の高い Web アプリケーションを構築します。今日、Web アクセシビリティに関する議論が最大の関心事です。この手法を使用すると、

• 高いユーザー維持率を備えた幅広いプラットフォームを構築するのに間違いなく役立ちます。 Web プラットフォームがビジネス目標の推進と価値の提供に関連している場合、このテクノロジーを実装すると、プラットフォームをよりユーザーフレンドリーにすることができます。 Web 標準は後で感謝します!

• 開発者として、Web プラットフォームに無限スクロールを実装する必要がある場合があります。この概念を理解することは、即座にビジネス価値を提供する上で大いに役立ちます

遅延読み込みの実装

次に見てみましょうWeb ページ上に画像を遅延読み込みする簡単な例。まず、ターゲット要素と観察する交差点のオプション オブジェクトをカスタマイズします。

let  options = {
root: document.querySelector('.root'),
rootMargin: '0px, 0px, 100px, 0px'
};

次に、ターゲット要素について、いくつかの画像をターゲットにします:

let  images = [...document.querySelectorAll('.targetImages')];

さて、実装コールバックを参照してください:

const callback = (entries) => {

entries.forEach(entry => {
 If (entry.isIntersecting) {
    observer.unObserve('entry.target');
}
// handle other code logic here 
})
}

オプション オブジェクトで指定されたカスタマイズに基づいて、引き続き交差オブザーバー コンストラクターを呼び出してターゲット要素を観察できます:

let observer = new intersectionObserver(options, callback);

最後に、次のことができます。観察対象のオブジェクトを観察する ターゲット要素:

images.forEach(image => {
observer.observe(image);
})

注: わかりやすくするために、HTML および CSS コードはここには含まれていません。この手法の実装方法について詳しくは、MDN ドキュメントのこの例を参照してください。

概要

Web ページ上に大量の画像やビデオがあり、ブラウザの DOM 初期化でそれらを読み込むと、次の利点が得られます。このテクノロジーの特徴は非常に明らかです。開発者として、私たちには、特にプラットフォームがビジネス目標に関連している場合、管理または保守しているプラ​​ットフォームの最適なパフォーマンスを確保する責任があります。

Web パフォーマンス テクノロジとして、遅延読み込みはこの種の問題の解決に役立ちます。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がJavaScript の遅延読み込みについて詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。