js 비동기 loading_javascript 기술을 위한 세 가지 솔루션

기본적으로 javascript는 동기적으로 로드됩니다. 즉, 후속 요소는 javascript가 로드될 때까지 기다려야 다시 로드될 수 있습니다. 일부 javascript는 헤드에 배치될 경우 의미가 없습니다. 페이지 로딩 속도가 매우 느려지면 사용자 경험에 심각한 영향을 미치게 됩니다.

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

스크립트가 문서의 내용을 변경하지 않는 경우 <script> 태그에 defer 속성을 추가하여 문서 처리 속도를 높일 수 있습니다. 브라우저는 스크립트를 실행하지 않고도 문서의 나머지 부분을 안전하게 읽을 수 있다는 것을 알고 있으므로 문서가 사용자에게 표시될 때까지 스크립트 해석을 연기합니다. <BR>예: <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="71033" class="copybut" id="copybut71033" onclick="doCopy('code71033')"><U>코드 복사 코드는 다음과 같습니다.<div class="codebody" id="code71033"> <BR><스크립트 유형 ="text /javascript" defer="defer"> <BR>alert(document.getElementById("p1").firstChild.nodeValue) <BR></script>

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

코드 복사 코드는 다음과 같습니다.

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


(3) 스크립트 작성, DOM 에 삽입, 로드 후 콜백, 코드 보기:

복사 code 코드는 다음과 같습니다.

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 { //기타: Firefox, Safari , Chrome 및 Opera
script.onload = function(){
callback();
}
script.src =
document.body.appendChild( 스크립트)
}