ホームページ >ウェブフロントエンド >jsチュートリアル >script タグを使用してファイルを同期的にロードするときに避けるべきよくある間違い
script タグを使用してファイルを同期的にロードするときに避けるべきよくある間違い
- WBOYオリジナル
- 2024-07-20 12:44:471158ブラウズ
スクリプトを同期的にロードすると、スクリプトのダウンロード後にコードの次の行が実行されると思うかもしれませんね?しかし、それは JavaScript ファイルの同期ロードの意味ではありません。特定のファイルをロードする非同期戦略、同期戦略、遅延戦略を比較するときに混乱が生じます。
非同期、同期、遅延の方法での JavaScript ファイルの読み込みの詳細については、投稿の最後で説明します。
ここでは、まずコードの実行について説明します。スクリプトが正常にダウンロードされた後にコード行を実行するには、script タグの onload 属性を使用できます。以下のコード スニペットを参照してください:
<html>
<head>
<title>Sync Script Tag</title>
</head>
<body>
<h1>Load script sync.</h1>
</body>
<script>
function afterLoad() {
console.log('script loaded successfully.') // executes after script has loaded
}
function sync_load() {
console.log('sync_load...')
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = false; // load synchronously
s.onload = afterLoad;
s.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js";
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
console.log('JS entry')
sync_load();
console.log('next tick') // this executes before after_load
</script>
</html>
出力:
さて、非同期 vs 同期 vs 遅延 戦略に戻ります。スタックオーバーフロー経由で以下の画像を参照してください。
この場合、非同期と同期の違いは、HTML ファイルの解析に関係します。覚えておいてください!
楽しくコーディングしてください✨
以上がscript タグを使用してファイルを同期的にロードするときに避けるべきよくある間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。