JS 비동기 로딩 방법

defer 및 async

• defer

html4는 스크립트 태그에 대한 확장 속성인 defer를 정의합니다. defer는 이 요소에 포함된 스크립트가 DOM을 수정하지 않도록 지정하므로 코드가 안전하게 연기될 수 있습니다. 그러나 이 속성은 이상적인 크로스 브라우저 솔루션이 아닙니다. 이 속성은 IE4+ 및 Firefox3.5+ 브라우저에서만 지원됩니다. 사용법은 다음과 같습니다:

<script type=&#39;text/javascript&#39; src=&#39;test.js&#39; defer></script>

defer 속성이 있는 ''script'' 태그는 문서의 어느 곳에나 배치할 수 있습니다. defer 속성이 있는 js 파일을 다운로드하면 브라우저의 다른 프로세스를 차단하지 않습니다. 이 유형의 파일은 페이지의 다른 리소스와 동시에 다운로드할 수 있습니다. defer 속성이 있는 스크립트 태그는 dom이 로드된 후(onload 이벤트가 트리거되기 전) 실행됩니다.

• async
  HTML5 사양에는 스크립트의 비동기 로딩을 위한 async 속성이 도입되었습니다.

 <script type=&#39;text/javascript&#39; src=&#39;test.js&#39; async></script>

async와 defer의 동일한 점은 병렬 다운로드를 사용하며 다운로드 프로세스 중에 차단이 없다는 점입니다. 차이점은 async는 로딩이 완료된 후 자동으로 실행되는 반면, defer는 페이지가 완료될 때까지 기다려야 한다는 점입니다.

스크립트의 동적 생성

주요 원칙: javascript는 html의 거의 모든 콘텐츠를 동적으로 생성할 수 있으므로 javascript를 사용하여 스크립트 태그를 동적으로 생성하고 이를 html에 추가할 수 있습니다.

var script = document.createElement("script");
  script.type = "text/javasctipt";
  script.src = "file.js";
  document.getElementByTagName("head")[0].appendChild(script)

다음 방법을 사용하여 스크립트 다운로드가 완료되고 준비되었는지 추적하고 확인할 수 있습니다.

function loadScript(url,callback){var script = document.createElement("script");
  script.type = "text/javasctipt";  //IE
  if(script.readyState){
        script.onreadystatechange = function(){
            if(script.readyState == 'loaded'||script.readyState =='complete'){
    script.onreadystatechange = null;
    callback()
}
}  
}else{
    script.onload = function(){
    callback();
}
}
script.src = url;
document.getElementByTagName("head")[0].appendChild(script)
}

호출 방법:

loadScript('files.js',function(){
    alert("file is loaded")
})

XMLHttpRequest 스크립트 삽입

XHR 개체를 통해 스크립트를 가져와 페이지에 삽입

으르르르르르

위 내용은 JS 비동기 로딩 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!