>  기사  >  웹 프론트엔드  >  Node.js 로딩은 DOM 메소드를 사용하여 Javascript 파일을 동적으로 로드합니다.

Node.js 로딩은 DOM 메소드를 사용하여 Javascript 파일을 동적으로 로드합니다.

高洛峰
高洛峰원래의
2017-02-06 09:28:291217검색

일반적으로 Javascript 파일을 로드할 때는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용합니다.
이렇게 합니다.
559853b309d71af2b7cfa1cfce4f8bd02cacc6d41bbb37262a98f745aa00fbf0

3f1c4e4b6b16bbbd69b2ee476dc4f83a 웹 페이지를 추가하면 브라우저가 이를 읽고 실행합니다. 그러나 몇 가지 심각한 결함이 있습니다.
(1) 엄격한 읽기 순서. 브라우저는 웹 페이지에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 나타나는 순서대로 Javascript 파일을 읽어서 즉시 실행하므로 여러 파일이 서로 의존하는 경우 종속성이 가장 적은 파일을 먼저 배치하고 가장 큰 종속성이 먼저 배치되어야 합니다. 파일은 끝에 배치되어야 합니다. 그렇지 않으면 코드에서 오류가 보고됩니다.
(2) 성능 문제. 브라우저는 "동기 모드"를 사용하여 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 로드합니다. 즉, 페이지가 "차단"되어 후속 HTML 코드를 실행하기 전에 JavaScript 파일이 로드될 때까지 기다립니다. 여러 개의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 있는 경우 브라우저는 이를 동시에 읽을 수 없습니다. 다른 태그를 읽기 전에 먼저 읽어야 하므로 읽기 시간이 크게 늘어나고 페이지 응답이 느려집니다.
이러한 문제를 해결하기 위해 DOM 메소드를 사용하여 Javascript 파일을 동적으로 로드할 수 있습니다.

  function loadScript(url){ 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = url; 
    document.body.appendChild(script); 
  }

이 원칙은 브라우저가 즉시 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 생성한 다음 Javascript 파일을 "비동기적으로" 읽는 것입니다. 이로 인해 페이지가 차단되지는 않지만 또 다른 문제가 발생합니다. 이런 방식으로 로드된 Javascript 파일은 원래 DOM 구조가 아니므로 DOM 준비(DOMContentLoaded) 이벤트 및 window.onload 이벤트에 지정된 콜백 함수가 유효하지 않습니다. 그것을 위해.

Javascript 파일을 동적으로 로드하기 위해 DOM 메서드를 사용하는 방법에 대한 더 많은 js 로딩 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.