JavaScript가 비동기 로딩 구현 방법을 해결하는 방법 요약

기본적으로 javascript는 동기식으로 로드됩니다. 즉, 후속 요소는 javascript가 로드될 때까지 기다려야 다시 로드될 수 있습니다. 페이지 헤드가 너무 느리면 로딩 속도가 느려지고 사용자 경험에 심각한 영향을 미칩니다.

(1) defer는 IE만 지원합니다.
defer 속성의 정의 및 사용법
defer 속성은 페이지가 로드될 때까지 스크립트 실행을 지연할지 여부를 지정합니다.
일부 자바스크립트 스크립트는 document.write 메서드를 사용하여 현재 문서 콘텐츠를 생성하지만 다른 스크립트는 그렇지 않을 수도 있습니다.

스크립트가 문서의 내용을 변경하지 않는 경우 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그에 defer 속성을 추가하여 문서 처리 속도를 높일 수 있습니다. 브라우저는 스크립트를 실행하지 않고도 문서의 나머지 부분을 안전하게 읽을 수 있다는 것을 알고 있으므로 문서가 사용자에게 표시될 때까지 스크립트 해석을 연기합니다.
예:

<script type="text/javascript" defer="defer"> 
alert(document.getElementById("p1").firstChild.nodeValue); 
</script>

(2) async:
async의 정의 및 사용법(HTML5의 속성)
async 속성은 스크립트를 사용할 수 있게 되면 비동기적으로 실행되도록 지정합니다.
예:

<script type="text/javascript" src="demo_async.js" async="async"></script>

참고: async 속성은 외부 스크립트에만 적용됩니다(src 속성을 사용하는 경우에만).
참고: 외부 스크립트를 실행하는 방법은 여러 가지가 있습니다.
• async="async"인 경우: 스크립트는 페이지의 나머지 부분에 대해 비동기적으로 실행됩니다(페이지가 계속 구문 분석되는 동안 스크립트가 실행됩니다)
•If async가 사용되지 않고 defer="defer": 페이지 구문 분석이 완료되면 스크립트가 실행됩니다.
• async와 defer가 모두 사용되지 않는 경우: 브라우저가 페이지 구문 분석을 계속하기 직전에 스크립트를 읽고 실행합니다

(3 ) 스크립트 생성, 삽입 DOM으로 이동, 로드 후 콜백, 코드 보기:

function loadScript(url, callback){ 
var script = document.createElement_x("script") 
script.type = "text/javascript"; 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || 
script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
}; 
} else { //Others: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
}

위 내용은 JavaScript가 비동기 로딩 구현 방법을 해결하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!