私の質問は単純です：同期と非同期のJavaScriptスクリプトの読み込みのパフォーマンスの違いは何ですか？
私が収集したものから、同期コードはページのロードや残りのコードの実行をブロックします。これは2つのレベルで発生します。
まず、実際に読み込まれるスクリプトのレベルで、次にJavaScriptコード自体の中で。
たとえば、次のページでは次のようになります。
同期：<script src="demo_async.js" type="text/javascript"></script>
非同期：<script async src="demo_async.js" type="text/javascript"></script>
編集：無効なコード例を削除しました
では、これらのさまざまな読み込み方法やJavaScriptパターンを使用した場合のパフォーマンスの違いは何でしょうか。
最初の質問/スニペットについては、パフォーマンスよりも制御フローに関するものです。パフォーマンスは、そこにある暗黙の結果にすぎません。
<script>タグは、従来、HTMLレンダラーが検出された場合にブロックします。つまり、マークアップの最上部にブロッキングタグが付いた巨大なJavaScriptファイルをロードした場合、スクリプトがロードされて評価されている限り、ユーザーはページの進行状況を確認できません。<script>
逆に、asyncやdefer<script>などの属性でタグにフラグを立てると、ブラウザはHTMLレンダリングプロセスを停止しなくなりますが、スクリプトブロックを非同期でロードして評価します。実装がこれをどのように行うかは、あなたの関心事ではありません（内部で実際のスレッドを使用するか、それとも順番に処理するか）。
2番目のスニペットは実際には非同期コードではありません。自分自身を呼び出す関数式です。それはまだ同期実行と見なされます。
非同期で読み込みを行うと、ブラウザはページ自体の他の部分を読み込むことができます。
さらに、スクリプト自体の負荷を比較するだけで、両方の方法のパフォーマンスは同じになります。