es6モジュールが出力した値がコピーされるのでしょうか？

いいえ、ES6 モジュールは値への参照を出力しますが、CommonJS モジュールは値のコピーを出力します。 ES6 モジュールでは、JS エンジンがスクリプトを静的に分析し、モジュール読み込みコマンドのインポートに遭遇すると、読み取り専用の参照を生成します。スクリプトが実際に実行されると、この読み取り専用に基づいて、読み込まれたモジュールに移動します。参照。値を取得します。 ES6 モジュールは動的参照です。ES6 モジュールは実行結果をキャッシュしませんが、ロードされたモジュールから値を動的に取得し、変数は常にそれらが配置されているモジュールにバインドされます。

ブラウザの読み込み

デフォルトでは、ブラウザ

は JavaScript スクリプト を同期的に読み込みます。つまり、レンダリング エンジンが<script> タグに到達すると停止し、スクリプトが実行されるまで待機し、下方向にレンダリングを続けます。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

<script>タグ内で defer または async 属性がオンになっている場合、スクリプトは非同期でロードされます。レンダリング エンジンは、このコマンド行を検出すると、外部スクリプト のダウンロードを開始しますが、ダウンロードされて実行されるのを待たずに、次のコマンド を直接実行します。

• deferページ全体がメモリ内で正常にレンダリングされるまで実行されません (DOM 構造が完全に生成され、他のスクリプトが実行される);
• asyncダウンロードされると、レンダリング エンジンはレンダリングを中断し、このスクリプトの実行後にレンダリングを続行します。

つまり、

defer は「レンダリング後に実行」、async は「ダウンロード後に実行」という意味です。さらに、複数の遅延スクリプトがある場合、それらはページに表示される順序で読み込まれますが、複数の非同期スクリプトは読み込み順序を保証できません。

ブラウザは ES6 モジュールをロードし、

タグも使用しますが、type="module" 属性を追加する必要があります。 type="module" を持つ <script> の場合、ブラウザは を非同期的に読み込みますが、 によってブラウザはブロックされません。ページ全体がレンダリングされるまで待ってから、モジュール スクリプト を実行します。これは、

<script type="module" src="./foo.js"></script>