JavaScriptの遅延読み込みを実装する方法

実装方法: 1. setTimeout メソッドを使用し、構文は「setTimeout('js メソッド', 遅延時間);」; 2. 外部の js スクリプト ファイルを導入する場合は、ボディに入れて、上からのページに従い、ロード順序を下って JavaScript コードを実行します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

js の遅延読み込みは、ページの読み込み速度の向上に役立ちます。遅延読み込みのいくつかの方法を次に示します:

1. setTimeout を使用してメソッドの読み込み時間を遅らせます。

Web ページの読み込み時間を増やすため、js コードの読み込みを遅らせます。

<script type="text/javascript" >
  function A(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello");
    });
  }
  $(function (){
    setTimeout(&#39;A()&#39;, 1000); //延迟1秒
  })
</script>

2. js を最後に読み込むようにします

例, 外部のjsスクリプトファイルを導入する場合、htmlの先頭に置くとページが読み込まれる前にjsスクリプトが読み込まれ、本文に置くとJavaScriptコードが順番に実行されます。ページは上から下にロードされます~~~ そこで、js の外部からインポートされたファイルをページの下部に配置して、js を最後に導入できるようにすることで、ページのロードを高速化できます。 ##上記の方法 2 では、Google ページ速度テスト ツールから「JavaScript の読み込み遅延」が発生する場合があります。警告。したがって、ここでの解決策は、Google ヘルプ ページの推奨解決策になります。

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
  function downloadJSAtOnload() {
    var element = document.createElement("script");
    element.src = "defer.js";
    document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

このコードは、ドキュメント全体がロードされるまで待ってから、外部ファイル「defer.js」をロードすることを意味します。

このコードを使用する手順:

1). 上記のコードをコピーします

2). HTML タグの前 (HTML ファイルの下部近く) にコードを貼り付けます。

3). 「defer.js」を外部 JS ファイルの名前に変更します

4). ファイル パスが正しいことを確認してください。例: 「defer.js」のみを入力する場合、「defer.js」ファイルは HTML ファイルと同じフォルダーに存在する必要があります。

注: このコードは、ドキュメントがロードされるまで、指定された外部 js ファイルをロードしません。したがって、通常のページ読み込みに依存する JavaScript コードをここに配置しないでください。代わりに、JavaScript コードを 2 つのグループに分ける必要があります。 1 つのグループは、ページで必要なためすぐに読み込まれる JavaScript コードであり、もう 1 つのグループは、ページが読み込まれた後に動作する JavaScript コード (クリック イベントの追加など) です。実行前にページが読み込まれるまで待機する必要がある JavaScript コードは、外部ファイルに配置してからインポートする必要があります。

[推奨学習:

JavaScript 上級チュートリアル

]

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