일반적으로 Javascript 파일을 로드할 때는 태그를 사용합니다. <br>다음과 같습니다. <br><script type="text/javascript" src="example.js"> 태그는 다음과 같습니다. 매우 편리합니다. 웹 페이지를 추가하기만 하면 브라우저가 이를 읽고 실행합니다. 그러나 몇 가지 심각한 결함이 있습니다. <br> (1) 엄격한 읽기 순서. 브라우저는 웹 페이지에 <script> 나타나는 순서대로 Javascript 파일을 읽어서 즉시 실행하므로 여러 파일이 서로 의존하는 경우 종속성이 가장 적은 파일을 먼저 배치하고 가장 큰 종속성이 먼저 배치되어야 합니다. 파일은 끝에 배치되어야 합니다. 그렇지 않으면 코드에서 오류가 보고됩니다. <br> (2) 성능 문제. 브라우저는 "동기 모드"를 사용하여 <script> 태그를 로드합니다. 즉, 페이지가 "차단"되어 후속 HTML 코드를 실행하기 전에 JavaScript 파일이 로드될 때까지 기다립니다. 여러 개의 <script> 태그가 있는 경우 브라우저는 이를 동시에 읽을 수 없습니다. 다른 태그를 읽기 전에 먼저 읽어야 하므로 읽기 시간이 크게 늘어나고 페이지 응답이 느려집니다. <br>이러한 문제를 해결하려면 DOM 메서드를 사용하여 Javascript 파일을 동적으로 로드할 수 있습니다. <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="78858" class="copybut" id="copybut78858" onclick="doCopy('code78858')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code78858"> <br> function loadScript(url){ <br> var script = document.createElement("script"); <br> script.type = "text/javascript"; <br> script.src = url; <br> document.body.appendChild(script); <br> <br> </div>이 원칙은 브라우저가 즉시 <script> 태그를 생성한 다음 Javascript 파일을 "비동기적으로" 읽는 것입니다. 이로 인해 페이지가 차단되지는 않지만 또 다른 문제가 발생합니다. 이런 방식으로 로드된 Javascript 파일은 원래 DOM 구조가 아니므로 DOM 준비(DOMContentLoaded) 이벤트 및 window.onload 이벤트에 지정된 콜백 함수가 유효하지 않습니다. 그것을 위해.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
