js での遅延読み込みとプリロードの具体的な使用法

遅延読み込み（レイジー読み込み）とプリロードは、Web 最適化によく使用される手段です。。

1. 遅延読み込み（レイジーロード）

原則: データの読み込みは、データが本当に必要な場合にのみ実行されます。
目的: 遅延読み込みメカニズムは、不要なパフォーマンスオーバーヘッドを回避するために提案されています。

遅延読み込みを実装するいくつかの方法

1. jsを最後に読み込む

使用法: 外部 js ファイルをページの下部に配置する目的: ページの読み込みを高速化するために js を最後に導入する説明:
ブラウザが同期モードを使用する理由は、通常、js ファイルをロードしたり、<script> タグを構造の最後に配置したりすると、ブラウザの後続の操作がブロックされるためです。そのため、最後に配置します。ページ構造とスタイルがすべてレンダリングされると、js が実行され、ユーザーエクスペリエンスが向上します。

2. defer属性

使用方法: <script> タグの defer 属性を定義します。
目的: ページの構成に影響を与えずにスクリプトを実行できるようにします。つまり、ページ全体が解析されるまでスクリプトは遅延されます。

<!DOCTYPE html>
<html>
<ヘッド>
  <script src="test1.js" defer="defer"></script>
  <script src="test2.js" defer="遅延"></script>
</head>
<本文>
<!-- ここにコンテンツを入力してください -->
</本文>
</html>

例:

<script> 要素は <head> 要素内に配置されますが、含まれているスクリプトは、ブラウザーが </html> タグに遭遇するまで実行が遅延されます。
ブラウザが defer 属性を持つスクリプトを解析すると、ページの後続の処理をブロックすることなく、 defer 属性を持つスクリプトを並行してダウンロードします。
すべての defer スクリプトは順番に実行されることが保証されます。（ただし、実際には遅延スクリプトは必ずしも順番に実行されるとは限らないので、遅延スクリプトは 1 つだけ含めるのが最適です）
defer 属性は外部スクリプトファイルにのみ適用されます。

3. 非同期属性

使用方法: <script> タグの async 属性を定義します。
目的: スクリプトのダウンロードと実行をページが待機しないようにし、ページの他のコンテンツを非同期的に読み込みます。

<!DOCTYPE html>
<html>
<ヘッド>
  <script src="test1.js" 非同期></script>
  <script src="test2.js" 非同期></script>
</head>
<本文>
<!-- ここにコンテンツを入力してください -->
</本文>
</html>

ブラウザはスクリプトをすぐにダウンロードしますが、他のリソースのダウンロードや他のスクリプトの読み込みの待機など、ページ上の他の操作を妨げることはありません。後続のドキュメント要素の読み込みとレンダリングのプロセスは、非同期プロセスである main.js の読み込みと実行と並行して実行されます。これらは onload イベントの前に完了します。

例:

ブラウザはスクリプトをすぐにダウンロードしますが、ページ内の他の操作には影響しません。後続のドキュメント要素の読み込みとレンダリングのプロセスは、スクリプトの読み込みと実行と並行して実行されます。
このプロセスは非同期であり、onload イベントの前に完了します。
すべての遅延スクリプトは読み込みの順序を制御できません。。
asyncr 属性は外部スクリプトファイルにのみ適用されます。

4. DOMを動的に作成する

//これらのコードは </body> タグの前 (HTML ファイルの下部近く) に配置する必要があります。
<script type="text/javascript">
  関数downloadJSAtOnload() {
    varelement = document.createElement("script");
    要素.src = "defer.js";
    document.body.appendChild(要素);
  }
  (window.addEventListener) の場合
   window.addEventListener("load",downloadJSAtOnload, false);
  そうでない場合 (window.attachEvent)
   ウィンドウにイベントを添付します("onload",downloadJSAtOnload);
  それ以外
   window.onload = ダウンロードJSAtOnload;
</スクリプト>

5. jQueryのgetScriptメソッドを使用する

方向：

Query.getScript(url,成功(応答,ステータス))

url (必須): 要求するURL文字列
success(response,status) (オプション): リクエストが成功した後に実行されるコールバック関数を指定します。

パラメータ
レスポンス - リクエストからの結果データが含まれます
status - リクエストのステータスが含まれます ("success"、"notmodified"、"error"、"timeout"、"parsererror")

目的: HTTP GET リクエストを介して JavaScript ファイルをロードして実行します。

//test.js を読み込んで実行します:
$.getScript("test.js");
// test.js を読み込んで実行し、成功したら情報を表示します $.getScript("test.js", function(){
 alert("スクリプトが読み込まれ、実行されました。");
});

6. setTimeoutを使用してメソッドの読み込み時間を遅らせる

目的: Web ページの読み込みに時間をかけるために js コードの読み込みを遅らせる

<script type="text/javascript">
 関数A(){
  $.post("/lord/login",{name:ユーザー名,pwd:パスワード},function(){
   アラート("Hello World!");
  })
 }
 $(関数(){
  setTimeout("A()",1000); // 1秒遅延})
</スクリプト>

一般的な例 - 画像の遅延読み込み

原則: 画像は <img> タグです。ブラウザが画像のリクエストを開始するかどうかは、<img> の src 属性に基づきます。したがって、遅延読み込みを実装する鍵は、画像が可視領域に入る前に <img> の src に値を割り当てないことです。このようにすると、ブラウザはリクエストを送信せず、画像が可視領域に入るまで待ってから src に値を割り当てます。

<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" >
<img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >

関数lazyload(){
 var 可視;
 $('img').each(関数() {
 if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 画像を遅延読み込みする必要があるかどうかを判断します visible = $(this).offset().top - $(window).scrollTop(); // 画像と上端の間の距離 if ((visible > 0) && (visible < $(window).height())){// 画像が表示領域内にあるかどうかを判断します visible = true;// 画像は表示領域内にあります } else {
    visible = false; // 画像は可視領域にありません}
  （可視）の場合{
    $(this).attr('src', $(this).attr('lazy-src'));
  }
 }
 });
}
 //ページを開いて関数 lazyload() をトリガーします。
 // スクロール時に関数をトリガーする window.onscroll = function(){
 遅延ロード(画像);
 }

2. プリロード

原則: 事前に画像を読み込み、ユーザーが表示する必要があるときにローカルキャッシュから直接レンダリングします。目的: ユーザー操作ができるだけ早く反映されるように、ユーザーエクスペリエンスと引き換えにフロントエンドのパフォーマンスを犠牲にします。

プリロードを実装するいくつかの方法

1. CSSの実装

原則: CSS の背景プロパティを使用して、画像をオフスクリーンの背景に事前に読み込むことができます。これらの画像へのパスが同じである限り、ブラウザは、Web ページ内の他の場所で呼び出されたときに、レンダリングプロセス中に事前に読み込まれた (キャッシュされた) 画像を使用します。シンプルで効率的、JavaScript は必要ありません。

#preload-01 { 背景: url(upload/2022/web/image-01.png) 繰り返しなし -9999px -9999px; }

#preload-02 { 背景: url(upload/2022/web/image-02.png) 繰り返しなし -9999px -9999px; }

#preload-03 { 背景: url(upload/2022/web/image-03.png) 繰り返しなし -9999px -9999px; }

2. js プリロード画像

原則: 関数を記述してプリロードします。スクリプトを関数内にラップし、addLoadEvent() を使用して、ページが読み込まれるまでプリロードを遅延します。

関数プリローダー() {
  ドキュメント.画像の場合
    var img1 = 新しい画像();
    var img2 = 新しい画像();
    var img3 = 新しい画像();
    画像を拡大
    画像を拡大
    画像を拡大
  }
}
関数addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = 関数;
  } それ以外 {
    window.onload = 関数() {
      if (oldonload) {
        古いonload();
      }
      関数();
    }
  }
}
LoadEvent を追加します(プリローダー)。

3. Ajaxを使用してプリロードを実装する

原則: Ajaxを使用して、DOMを使用して画像のプリロード方法を実装し、画像のプリロードだけでなく、CSS、JavaScript、その他の関連するもののプリロードも行います。

window.onload = 関数() {
  setTimeout(関数() {
    // XHR は JS と CSS をリクエストします
    var xhr = 新しい XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.js');
    xhr.send();
    xhr = 新しい XMLHttpRequest();
    xhr.open('GET', 'http://domain.tld/preload.css');
    xhr.send();
    // 画像をプリロードする
    新しい Image().src = "upload/2022/web/preload.png";
  }, 1000);
};

上記のコードは、「preload.js」、「preload.css」、および「preload.png」をプリロードします。 1000 ミリ秒のタイムアウトは、スクリプトがハングして通常のページで機能上の問題が発生するのを防ぐためのものです。

3. 遅延読み込みとプリロードの比較

1. コンセプト

遅延読み込みはレイジー読み込みとも呼ばれ、データが本当に必要な場合にのみデータの読み込みが実行されます。
プリロード: 事前にロードし、ユーザーが表示する必要があるときにローカルキャッシュから直接レンダリングします。

2. 違い

2 つのテクノロジーの本質: 2 つの動作は逆で、1 つは事前に読み込み、もう 1 つはゆっくりと読み込まれるか、まったく読み込まれません。
遅延ロードはフロントエンドの負荷を軽減しますが、プリロードはフロントエンドの負荷を増加させます。

3. 意義

遅延読み込みの主な目的は、フロントエンドのパフォーマンスを最適化し、リクエストの数を減らしたり、リクエストの数を遅らせたりすることです。
プリロードでは、ユーザーエクスペリエンスと引き換えにフロントエンドのパフォーマンスが犠牲になり、ユーザー操作が可能な限り迅速に反映されます。

IV. 参考文献

【1】https://www.jb51.net/article/154930.htm
【2】https://www.jb51.net/article/57579.htm

js での遅延読み込みとプリロードの具体的な使用法に関するこの記事はこれで終わりです。js での遅延読み込みとプリロードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様が今後も 123WORDPRESS.COM を応援してくれることを願っています。

以下もご興味があるかもしれません: