deferおよびasnyc(外部ファイルのみ有効) deferは、ページの解析が完了したときにコードを実行します.このプロパティは、スクリプトが実行されるときにページの構造に影響を与えないことを示します.要素にこのプロパティを設定することは、ブラウザにすぐにダウンロードするが、実行を遅らせることを伝えるに相当します.
asyncはページの他の部分に対してスクリプトを非同期で実行し、一般的なscriptラベルはページ実行をブロックし、async属性を付けないラベルは後のラベルの解析をブロックします.一般にdom要素を操作する必要のないスクリプトに用いられるが、例えば、いくつかの統計コード(ページ実行ロジックに関係なくdom操作に関係しない)は、長時間のロードによる白画面現象を回避することができる.
scriptに違いがあるかどうか scriptにdeferとasyncがない場合は、すぐにがロードされ、実行されます.
scriptにasyncがありdeferがない場合、レンダリング後のドキュメント要素と並列にロードされ、ロードが完了すると自動的にが実行されます.
scriptにdeferがasyncを持たない場合、後続のドキュメント要素レンダリングはスクリプトファイルのロードと並行しますが、すべての要素解析が完了すると、DOMContentLoadedの前にを実行します.
https://segmentfault.com/q/10...この答えは素晴らしい
しかし、紅宝書には、HTML 5の規範では、スクリプトの実行はスクリプトが出現した前後順に実行すべきであることが要求されているが、現実生活では、遅延スクリプトは必ずしも順序に従って実行されるわけではなく、DOMContentLoadedイベントでトリガーされる前に実行されるとは限らないため、遅延スクリプトは1つだけ含まれることが望ましい.そのため上図の第3点の言い方はに欠けている.
問題は解決していません:すべてのブラウザが互換性があるのに、なぜ他の人が使っているのを見ていませんか?
調べてみると、ネットは使いやすくて、ブラウザの互換性はまだ少し問題があって、and業務の需要
scriptは並列にダウンロードできます.ここではheadに配置されたscriptラベルを指し、他のscriptラベルはブロックされませんが、画像などの他のリソースのダウンロードはブロックされます.スクリプトのダウンロードは相互に影響しませんが、ページはすべてのjsコードがダウンロードされ、実行が完了するまで待たなければなりません.--『高性能js』パラレルダウンロードテスト
bodyの底部に置くことを推奨する
各scriptタグの初期化はページレンダリングをブロックし、htmlページを解析する過程でscriptタグが1つ出会うたびにスクリプトの実行によって一定の遅延をもたらす.
単一の大きなjsファイルはhttpを1回だけ要求するが、ブラウザをロックしてしばらくの間、解決策は上記のdeferのほかにheadにラベルを動的に作成することができ、onloadイベントでスクリプトのロードが完了したかどうかを傍受することができ、ieの下でreadystatechangeイベントを通過する.
function loadScript(url, callback) {
var script = document.createElement('script');
if ( script.readyState ) { // IE
script.onreadystatechange = function(){
if( script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null; // ， ，
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}