スクリプトを同期的にロードすると、スクリプトのダウンロード後にコードの次の行が実行されると思うかもしれませんね?しかし、それは 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 サイトの他の関連記事を参照してください。