es6 모듈에서 출력된 값이 복사되나요?

아니요, ES6 모듈은 값에 대한 참조를 출력하는 반면 CommonJS 모듈은 값의 복사본을 출력합니다. ES6 모듈에서는 JS 엔진이 스크립트를 정적으로 분석하고 모듈 로딩 명령 import를 발견하면 스크립트가 실제로 실행될 때 이 읽기 전용 참조를 기반으로 로드된 모듈로 이동합니다. 참고하세요. ES6 모듈은 동적 참조입니다. ES6 모듈은 실행 결과를 캐시하지 않지만 로드된 모듈에서 값을 동적으로 가져오며 변수는 항상 해당 모듈이 위치한 모듈에 바인딩됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

브라우저 로딩

기본적으로 브라우저는 JavaScript 스크립트를 동기적으로 로드합니다. 즉, 렌더링 엔진이 <script> 태그를 발견하면 중지하고 다음이 될 때까지 기다립니다. 실행 스크립트를 완료하고 렌더링을 계속합니다. <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是“下载完就执行”。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

浏览器加载 ES6 模块，也使用<script>标签，但是要加入type="module"属性。浏览器对于带有type="module"的<script>，都是异步加载，不会造成堵塞浏览器，即等到整个页面渲染完，再执行模块脚本，等同于打开了

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

如果网页有多个