JS非同期loading_javascriptスキルのための3つのソリューション

デフォルトでは、JavaScript は同期的にロードされます。つまり、後続の要素は、JavaScript が先頭に配置されている場合、再度ロードされる前にロードされるまで待機する必要があります。ページの読み込みが非常に遅くなる原因となり、ユーザー エクスペリエンスに重大な影響を及ぼします。

(1) defer、IE のみをサポート
defer 属性の定義と使用法 (w3school Web サイトから取得しました)
defer 属性は、スクリプトの実行を遅延するかどうかを指定します。ロードされるまでページを閉じます。
一部の JavaScript スクリプトは document.write メソッドを使用して現在のドキュメント コンテンツを作成しますが、他のスクリプトは使用しない場合があります。

スクリプトがドキュメントのコンテンツを変更しない場合は、<script> タグに defer 属性を追加してドキュメントの処理を高速化できます。ブラウザは、スクリプトを実行しなくてもドキュメントの残りの部分を安全に読み取ることができることを知っているため、ドキュメントがユーザーに表示されるまでスクリプトの解釈を延期します。 <br>例: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="71033" class="copybut" id="copybut71033" onclick="doCopy('code71033')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code71033"> <br><スクリプト タイプ="text /javascript" defer="defer"> <br>alert(document.getElementById("p1").firstChild.nodeValue); <br><br> </div> <br>( 2) async<strong>: </strong>async の定義と使用法 (HTML5 の属性です) <br>async 属性は、スクリプトが利用可能になると非同期で実行されることを指定します。 <br>例: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="62747" class="copybut" id="copybut62747" onclick="doCopy('code62747')">コードをコピー<u></u></a> コードは次のとおりです:</span></div> <div class="codebody" id="code62747"><スクリプト タイプ="text /javascript" src="demo_async.js" async="async"></script>