ホームページ > 記事 > ウェブフロントエンド > HTML の script タグの詳細な説明 (コード付き)
HTML の script タグの詳細な説明 (コード付き)
- 不言オリジナル
- 2018-09-06 17:32:158412ブラウズ
この記事では、HTML の script タグ (コード付き) について詳しく説明します。必要な方は参考にしてください。
script 要素
HTML ページで「JavaScript」言語を使用する主な方法は、script 要素を使用することです。script 要素内のコードは上から下に実行されます。
複数のスクリプト要素が導入されると、ブラウザはページに表示される順序でスクリプト要素を解析します。前の解析が完了すると、次のスクリプト要素のコンテンツが処理されます。
HTML の場合は 2 つの方法があります。
//第一种方法：直接在标签内使用 javascript 即可
<script>
console.log('第一种使用方法');
</script>
//第二种方法：引用外部文件
<script src="example.js"></script>でJavaScriptを使用するにはスクリプト要素の属性 スクリプト要素の一般的に使用されるいくつかの属性- src: オプション、外部JavaScriptファイルを参照するために使用されます
- type: オプション、コードを記述します 使用されるスクリプト言語のタイプ(MIME タイプでもあります)、デフォルト値は text/javascript です
- async: オプション、スクリプトの非同期読み込み、外部スクリプト ファイルに対してのみ有効
- defer: オプション、遅延スクリプト読み込み、ドキュメントが読み込まれた後に実行されます。完全に解析され、外部スクリプト ファイルに対してのみ有効です
すべてのスクリプト要素は
要素に配置されます このアプローチは、ページに多くのコンテンツがある場合、すべての Javascript コードが実行されるまで待機する必要があることを意味します。この方法では、ページの読み込みが非常に遅くなり、ユーザー エクスペリエンスが非常に悪くなることがわかります。では、このように最適化するにはどうすればよいでしょうか。実はとても簡単です。<!DOCTYPE html> <html> <head> <title></title> <script src="example1.js"></script> <script src="example2.js"></script> </head> <body> <div>页面的内容区域</div> </body> </html>すべてのスクリプト要素はページのコンテンツの後ろに配置されます上記のページの読み込みが遅い問題を最適化するには、使用する Javascript コードをページのコンテンツの後に配置するだけで済みます。最初にロード その後コンテンツが表示され、JavaScript コードが実行されるため、ユーザーはページにコンテンツが表示されるまで長時間待つ必要がありません。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>页面的内容区域</div>
<script src="example1.js"></script>
<script src="example2.js"></script>
</body>
</html>
スクリプトの読み込みの遅延 スクリプトの読み込みを遅延するには、script 要素の defer 属性を使用する必要があります。要素で defer 属性が使用されている場合、スクリプトは実行前にページ全体が解析されるまで遅延されます。
//example1.js 中的代码
//console.log('example1');
//console.log(document.getElementById('content'));
//example2.js 中的代码
//console.log('example2');
//console.log(document.getElementById('content'));
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script defer src="example1.js"></script>
<script defer src="example2.js"></script>
</head>
<body>
<div id="content">这里页面的内容</div>
</body>
</html> defer 属性が追加されていない場合、コンソールに次の結果が出力されることがわかります
example1 null example2 nulldefer 属性が要素に追加されると、結果が変更され、JavaScript コードが表示されないことがわかります。 p 要素のコンテンツがロードされるまで。
example1
<div id="content">这里页面的内容</div>
example2
<div id="content">这里页面的内容</div>
スクリプトの非同期ロード スクリプトの非同期ロードには、script 要素の async 属性が必要です。ただし、どちらも script 要素のロード動作を変更します。ただし、async 属性は他の要素には影響しません。ページの読み込みがブロックされ、非同期属性を持つスクリプトは実行順序を保証できません。これは defer 属性とは異なります。 つまり、example2.jsのコードはexample1.jsのコードよりも前に実行される可能性があるため、async属性を使用する場合は、2つのjs間の相互依存を避けてください。 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script async src="example1.js"></script>
<script async src="example2.js"></script>
</head>
<body>
<div id="content">这里页面的内容</div>
</body>
</html>
noscript 要素 初期のブラウザには別の問題があります。それは、ブラウザが Javascript 言語をサポートしていない場合にページのコンテンツを表示する方法です。この解決策は、ブラウザが Javascript 言語をサポートしていない場合に使用できる noscript 要素を作成することです。 JavaScript はサポートされていません。コンテンツはブラウザで表示されます。JavaScript をサポートしていないブラウザでのみ表示されます。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script async src="example1.js"></script> <script async src="example2.js"></script> </head> <body> <noscript> 当前浏览器不支持 Javascript 请更换浏览器 </noscript> </body> </html>関連する推奨事項:
HTML における script タグの役割は何ですか? scriptタグでのtype属性の使い方は何ですか?