동기식 모듈의 경우 모듈을 미리 메모리에 로드해야 합니다. 예를 들어 비동기 모듈의 경우 requirejs 구현은 프런트 엔드에 의존하고 미리 실행됩니다. 그러면 이것도 미리 메모리에 로드되지 않습니까? AMD와 CMD에 대해 많이 읽은 후에는 동기 모듈 로딩과 비동기 모듈 로딩의 차이점을 잘 이해하지 못했습니다.
이 메커니즘은 [메모리]와는 거의 관련이 없으며 [스크립트 다운로드 타이밍]으로 더 많이 이해될 수 있습니다.
프런트엔드의 특징은 스크립트 파일의 크기와 다운로드 시간이 페이지 성능에 직접적인 영향을 미친다는 것입니다. 동기 로딩 사양에서는 스크립트를 실행하기 전에 모든 종속성을 다운로드해야 합니다.
비동기 로딩 사양에서는 코드가 필요한 위치에 실행될 때만 필요한 스크립트가 로드됩니다. 예를 들어, 거대한 단일 페이지 애플리케이션에서는 홈 페이지의 스크립트가 매우 가벼울 수 있으며 특정 기능 페이지에 들어갈 때 필요한 모듈을 비동기식으로 로드할 수 있으므로 성능에 큰 도움이 됩니다.
requirejs의 비동기 로딩은 기본적으로 <head>에 비동기적으로 로드되어야 하는 <script>를 추가합니다. 이러한 <script> 요소에는 비차단 비동기 로딩을 달성하기 위한 async 속성이 있습니다. 그런 다음 onload를 통해 각 스크립트의 로딩 완료 상태를 모니터링하여 종속성이 있는 여러 스크립트의 순차적 로딩 순서를 실현합니다. async 및 onload를 사용하여 간단한 비동기 로딩 기능을 구현할 수 있지만, requirejs와 같은 기능을 구현하려면 여전히 많은 노력이 필요합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 메커니즘은 [메모리]와는 거의 관련이 없으며 [스크립트 다운로드 타이밍]으로 더 많이 이해될 수 있습니다.
프런트엔드의 특징은 스크립트 파일의 크기와 다운로드 시간이 페이지 성능에 직접적인 영향을 미친다는 것입니다. 동기 로딩 사양에서는 스크립트를 실행하기 전에 모든 종속성을 다운로드해야 합니다.
비동기 로딩 사양에서는 코드가 필요한 위치에 실행될 때만 필요한 스크립트가 로드됩니다. 예를 들어, 거대한 단일 페이지 애플리케이션에서는 홈 페이지의 스크립트가 매우 가벼울 수 있으며 특정 기능 페이지에 들어갈 때 필요한 모듈을 비동기식으로 로드할 수 있으므로 성능에 큰 도움이 됩니다.
requirejs의 비동기 로딩은 기본적으로 <head>에 비동기적으로 로드되어야 하는 <script>를 추가합니다. 이러한 <script> 요소에는 비차단 비동기 로딩을 달성하기 위한 async 속성이 있습니다. 그런 다음 onload를 통해 각 스크립트의 로딩 완료 상태를 모니터링하여 종속성이 있는 여러 스크립트의 순차적 로딩 순서를 실현합니다. async 및 onload를 사용하여 간단한 비동기 로딩 기능을 구현할 수 있지만, requirejs와 같은 기능을 구현하려면 여전히 많은 노력이 필요합니다.