[JavaScript]デフォルトクリア
4409 ワード
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="main.js"></script>
</head>
<body></body>
</html>
1)headにスクリプトを直接含める場合
->ユーザーがhtmlファイルをダウンロードすると、ブラウザは行ごとに分割(分析)し、cssとマージしてDom要素に変換します.
->スクリプトがタグに遭遇した場合は、パーティションを停止し、必要なJavaScriptファイルを取得して読み込み、パーティションを再起動します.
欠点:jsファイルが大きく、インターネットが遅く、ページのロードが遅い.
2)body内部の末尾にスクリプトを追加する

->ブラウザでhtmlをダウンロードし、ページの準備が整うとスクリプトと出会い、サーバでパッチを適用します.->ユーザーが最初に基本的なhtmlファイルを表示できるようにします.
欠点:ウェブサイトがjavascriptに依存するファイルである場合、ユーザーが正常にページを表示する前に、サーバはパッチを待つ時間と、実行を待つ時間が必要です.
3)html+asyn(asyncは使用不可タイプ、trueとしてのみ宣言)

->headにスクリプトを書き込み、asynというプロパティ値を使用する場合、ブラウザはパーティション化時にasynに遭遇し、javascriptを並列に実行し、パーティション化を継続し、ダウンロードが完了した後にjsファイルを実行し、残りの部分をパーティション化します.
欠点:これにより、htmlファイルの読み取りと同時にパッチが発生するため、時間が短縮されますが、jsはhtmlがパケット化される前に完了します.jsで操作する場合は
htmlファイルの要素はまだ定義されていない可能性があります.ユーザーはまだページを表示する時間が必要です
4) html + defer

->配布中にdeferに遭遇した場合は、コマンドでダウンロードし、残りのhtmlを最後に割り当てます.
->jsを最後に実行
asyn vs defer
asynは複数のファイルを使用して、まずダウンロードしたファイルを実行します.定義されたスクリプト順序を考慮しない
deferなどはダウンロードされ、順番に表示されます.(defetオプションが最も有効で、最も安全です.)
JavaScriptを使用する場合は、一番上に「use strict」を定義したほうがいいです.効率的な運用
Reference
この問題について([JavaScript]デフォルトクリア), 我々は、より多くの情報をここで見つけました https://velog.io/@hoyyat/JavaScript-기본정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol