むかしむかし、ある山にお寺があって、そのお寺に若いお坊さんと年老いたお坊さんがいました。
老僧は「台本タグを知っていますか？それは..."
老僧が質問を終える前に、若い僧は手に持っていた木魚を置いた： "マスター、STOP、forループとforEachの違いに答えた後、スクリプトがアウトバウンド導入とインバウンドに分割され、本体の最後に配置することがページの読み込みに資することを知っているにもかかわらず、あなたは私がああ山を下りさせませんでした"
老僧は慌てて止めました。「お聞きしたいのですが、スクリプトの上にdefer属性とasync属性があること、またその違いをご存知ですか？
小坊主は木魚を手に取り、口ごもりました。"胴体の端に台本を付けました。これ以上私に何を望むのですか？"
突然、老僧が
スクリプト内のHTMLは、defer、async
ロードランナー：「scriptタグには、よく使われるsrc属性の他に、defer、asyncがあることはよく知られています；
みんな首を横に振って
ロードランナー：「つまり、W3Cの歴史によると、はっきりさせましょう。
- async はスクリプトの非同期実行を指定します。
- defer は、ページが読み込まれるまでスクリプトの実行を遅らせるかどうかを指定します。"
突然、群衆の中から "口ほどにもない "と連呼する元気な若者が現れました。
観客も一緒になって声を上げました；
最後の手段として、ロードランナーはポケットからエディターとブラウザーを取り出しました：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script async src="../js/examp2.js"></script> <!-- console.log('2 ')-->
</head>
<body>
<header>
header
</header>
<main>
スレッド：なぜdivではないのか？
</main>
<footer>
</footer>
<script >
document.addEventListener('DOMContentLoaded', function() {
console.log(' ')
})
</script>
<script src="../js/examp3.js"></script> <!-- console.log('3 ')-->
</body>
</html>
結果
examp1.jsとexamp2.jsをHEADに置くなんて、ブラウザの解析が遅くなるのを恐れているのでは？"
従来の操作では、jsファイルをボディの最後に置くことで、ドキュメントの解析に影響を与えず、ユーザーエクスペリエンスを向上させます；
asyncはブロックせず、自由にキューを挿入します☆☆☆☆。
""非同期タグ、ドキュメントの解析をブロックしない、外部jsファイルを並行してロードする、DOMContentLoadedイベントの前でも後でもよい"。
"
<script async src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script src="../js/examp2.js"></script> <!-- console.log('2 ')-->
ほら、第1子の位置が不確定な以外は、常に「第2子＞本体＞第3子」。
この時点で、2ワイフが蛇魂を倒して1ワイフを召喚できなければ、ggの可能性あり；
などの相互依存性を持つjsファイルを紹介しました：
この場合、$.ajax undefinedというエラーを報告することができます。
<script async src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script async src="../js/examp2.js"></script> <!-- console.log('2 ')-->
西遊記に孫興石、石興孫、興石孫、紅包包、包包包包......と出てきたように。
defer ノンブロッキング、キューイング実行☆☆☆☆。
"このやんちゃでエッチなasyncはコントロールできないので、「defer」がどんなサプライズをもたらすか見てみましょう。
"
- また、ドキュメントの解析や外部jsファイルの読み込みをブロックしません。
- 違いは、jsファイルが読み込まれた後、すぐに実行されるのではなく、実行順序に従って、それぞれの前後を見て、DOMContentLoadedイベントで実行されなければならないことです。
<script src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script defer src="../js/examp2.js"></script> <!-- console.log('2 ')-->
スクリプトにはasyncとdeferの両方があり、asyncは機能しますが、deferは機能しません。
<script src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script defer async src="../js/examp2.js"></script> <!-- console.log('2 ')-->
結果
インライン・スクリプト・タグは非同期を使いたいのですが、deferは無理です。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/examp1.js"></script> <!-- console.log('1 ')-->
<script src="../js/examp2.js"></script> <!-- console.log('2 ')-->
<script async>
console.log('インライン非同期')
</script>
</head>
うまくいきません。
"観客は夢から覚めたかのように、ローディーは存在しない口ひげを撫で、満足げに微笑みました。"BODYの底に置くといい匂いがするでしょ？"と、あの遠くのティーンエイジャーの姿を見るだけでした。やっぱり料理は料理！
"
振り返り。
- async と defer はドキュメントの解析をブロックしません。
- deferはロードされ、jsファイルが導入された順に実行され、DOMContentLoadedの前に実行されます。
- asyncは、このDOMContentLoadedに関係なく、ロードされ、直ちに実行されます。
"引用1：
"
参考
[1]W3school。
