ホームページ > 記事 > ウェブフロントエンド > JS非同期loading_javascriptスキルのための3つのソリューション
JS非同期loading_javascriptスキルのための3つのソリューション
- WBOYオリジナル
- 2016-05-16 17:41:051177ブラウズ
デフォルトでは、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>
注: 外部スクリプトを実行するには複数の方法があります:
• async="async" の場合: スクリプトはページの残りの部分に対して非同期で実行されます (ページの解析が継続されている間にスクリプトが実行されます) )
•async が使用されておらず、defer="defer" の場合: ページの解析が終了したときにスクリプトが実行されます
• async も defer も使用されていない場合: スクリプトはブラウザの直前に読み取られて実行されますページの解析を続行します
(3) スクリプトを作成し、DOM に挿入し、ロード後にコールバックします。コードを参照してください:
var script = document.createElement_x("script")
script.type = "text/ javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
}
} else { //その他: Firefox、Safari 、Chrome、および Opera
script.onload = function(){
};
script.src = url;スクリプト);
}