자바스크립트 파일의 동기 로딩과 비동기 로딩 구현 원리_javascript 기술

HTML 4.01 스크립트 속성
문자 집합: 선택 사항. src에 의해 도입된 코드의 문자 집합을 지정합니다. 대부분의 브라우저는 이 값을 무시합니다.
defer: 부울, 선택 사항. 스크립트 실행을 지연시키는 것은 페이지의 body 태그 하단에 script 태그를 배치하는 것과 같습니다. js 스크립트는 문서의 DOMContentLoaded 전에 실행됩니다. IE 및 최신 버전의 Firefox를 제외한 다른 브라우저는 지원되지 않습니다.
언어: 더 이상 사용되지 않습니다. 대부분의 브라우저는 이 값을 무시합니다.
src: 선택사항. 접미사 이름을 제한하지 않고 가져온 외부 코드 파일을 지정합니다.
유형: 필수입니다. 스크립트의 콘텐츠 유형(MIME 유형)을 지정합니다. 실제로는 일반적으로 이 값을 지정할 필요가 없습니다. 브라우저는 기본적으로 이를 텍스트/자바스크립트 유형으로 해석하고 실행합니다.

HTML5의 스크립트 속성 : 새로운 HTML5 표준에 의해 정의된 속성 외에도 HTML5의
script 태그는 언어 속성을 제거하고 HTML4.01과 비교하여 수정했습니다. . type 속성은 선택 사항이며(기본 text/javascript) 새 속성 async가 추가되었습니다.
async: 속성의 역할인 부울은 스크립트가 비동기적으로 실행되는지 여부를 정의하며 값은 true 또는 false입니다.
async가 true로 설정되면 defer 속성이 무시됩니다.
비동기적으로 실행되는 js 파일은 로딩하는 문서에 내용을 쓰기 위해 document.write()를 사용하지 않는 것으로 가정하므로, 비동기적으로 실행되는 js 파일의 로딩 및 실행 중에는 document.write()를 사용하지 마세요
그 외 스크립트 태그 속성에 페이지가 js 파일을 소개하는 방식은 로딩 및 실행 모드에 영향을 줍니다.
appendChild(scriptNode)와 같은 스크립트 노드를 추가하여 소개된 모든 js 파일은 비동기식으로 실행됩니다(scriptNode를 삽입해야 함). 문서에 노드를 생성하고 src를 설정하면 js 파일이 로드되지 않습니다. 이는 img를 미리 로드하는 것과 유사하지 않습니다.)
html 파일의 <script> src가 참조하는 파일은 동기식으로 로드됩니다. 그리고 실행된 <br>html 파일의 <script> 태그에 있는 코드는 document.write() 메서드를 사용하여 <script&gt의 src 속성이 참조하는 js 파일을 소개합니다. ; 비동기적으로 실행되는 <BR>html 파일의 태그. js 파일의 코드에서 document.write() 메소드를 사용하여 도입된 js 파일이 동기적으로 실행됩니다. <BR>이미지 객체를 사용하여 js 파일을 비동기적으로 미리 로드합니다( 실행되지 않습니다) <br><br>다음과 같은 것을 사용하지 마십시오. 이 메소드는 js 파일 로드 요청을 시작하지 않습니다: <BR>divNode.innerHTML = '<script src="xxx.js"&gt ;</script>';
window.onload 이벤트는 js에서 실행됩니다. 파일이 로드된 후에만 발생합니다(비동기적으로 로드되더라도)
============ ========================= ================

<script> <br>//실행된 코드를 동기적으로 로드합니다 <br></script> 2.
xx.js
3.
<script> document.write('<script src="xx.js"></script>')에서 코드를 동기적으로 로드하고 실행합니다. //xx.js

4,

xx에서 코드를 비동기적으로 로드하고 실행합니다. js에는 다음 코드가 포함되어 있습니다.

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

document.write ('')

document.write('< ;script src="22.js">');


그러면 xx.js, 11.js, 22.js가 모두 동기적으로 로드되어 실행됩니다.

스크립트 노드를 삽입하여 xx.js, 11.js 및 22.js가 비동기적으로 로드되면 11.js 및 22.js가 스크립트 노드를 삽입하여 비동기적으로 로드됩니다.
xx.js가 스크립트 노드를 삽입하여 비동기적으로 로드되는 경우 11.js 및 22.js는 document.write(script) 모드에서 로드된 다음 11.js 및 22.js는 동기적으로 로드됩니다(최신 브라우저에서 테스트한 결과 Chrome에서는 xx.j의 비동기 로드 실행이 더 이상 지원되지 않습니다). 사용 가능한 document.write()는 문서에 내용을 쓰지만, Firefox와 IE는 문서가 닫히기 전에 쓸 수 있습니다(문서가 닫히는 것을 방지하기 위해 html에서 경고를 사용하는 방법입니다))
테스트: 11의 경고() .js(for 루프를 사용하지 마십시오. 브라우저는 단일 스레드에서 실행되며 코드 조각을 계속 실행하면 나머지 코드가 차단됩니다.), 22.js의 console.log(), 22.js의 코드가 차단된 것을 확인할 수 있습니다
5.
다음 메소드에서는 AppendChild가 실행된 후 xx.js가 비동기적으로 로드되어 실행됩니다

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

var script = document.createElement("script")

script.setAttribute("src ","xx.js");
documenrt.getElementsByTagName("head") [0].appendChild(script);


6. 이미지 객체를 사용하여 js 파일을 비동기식으로 미리 로드합니다(실행되지 않음)
이미지의 src가 할당될 때 요청이 시작되고 파일 형식이 까다롭지 않습니다(이미지가 동적으로 로드될 수도 있음). 인증 코드와 같은 스크립트로 생성됨), js 파일의 URL을 image.src에 할당할 수 있으며 js는 로드 후 브라우저에 의해 캐시됩니다.
코드 복사

코드는 다음과 같습니다. var img = new Image() img.onload = function(){ Alert( 1); }; //반환된 js 파일 MIME이 이미지가 아니므로 onload 콜백 함수가 실행되지 않습니다.

img.src = 'http://localhost/test/loadjs/try.2.js' ;

var s = document.createElement("script");
var h = document.getElementsByTagName("head")[0]
//js 실행
s.src=img. src;
h.appendChild(s);


js 파일을 로드하는 함수:

코드 복사

코드는 다음과 같습니다. var loadJS = function(url,callback){ var head = document.getElementsByTagName('head')

if(head&&head) .length){

head = head[0];
}else{
head = document.body
}
var script = document.createElement('script'); >script.src = url;
script.type = "text/javascript";
head.appendChild(script)
script.onload = script.onreadystatechange = function(){
// 스크립트 태그, IE에는 onreadystatechange 이벤트가 있고, w3c 표준에는 onload 이벤트
//이 ReadyState가 있습니다. IE8 이하에는 onreadystatechange가 없으며 this.readyState는 없습니다. 파일이 성공적으로 로드되지 않은 경우 실행됩니다.
//(!this.readyState)는 W3C 표준용입니다. IE 9는 W3C 표준 onload도 지원합니다.
if ((!this.readyState) || this.readyState == "완료" || this.readyState == "로드됨" ){
callback();
}
}//end onreadystatechange
}


4번 테스트(동기 로딩) (경고를 삽입하면 로딩 중 차단을 쉽게 확인할 수 있음)
tryjs .html

코드 복사

코드는 다음과 같습니다.
< ;body>



tryjs .js



코드 복사 >

코드는 다음과 같습니다.

console.log('write start')

document.write(''); document.write(''); console.log(' 쓰기 완료'); try.1.js

코드 복사


코드는 다음과 같습니다. :

console.log('loadjs 1 시작');

console.log('loadjs 1 완료') try.2.js

코드 복사


코드는 다음과 같습니다.

console.log('loadjs 2 start') ;

console.log('loadjs 2 완료')
테스트 결과(IE789에서는 파일 2와 파일 1의 콜백 완료 순서가 불확실함)
IE 7:
로그: 외부 js 콜백 로드 IE
로그: 외부 js 콜백 로드 IE
로그: 쓰기 시작
로그: 쓰기 완료
로그: 외부 js 콜백 완료 IE
로그: 파일 1 콜백 로딩 IE
로그: 파일 2 콜백 로딩 IE
로그: loadjs 1 시작
로그: loadjs 1 완료
로그: loadjs 2 시작
로그: loadjs 2 완료
로그: 파일 2 콜백 완료 IE
로그: 파일 1 콜백 완료 IE

IE8:
로그: 외부 js 콜백 로드 IE
로그: 외부 js 콜백 로드 IE
로그: 쓰기 시작
로그: 쓰기 완료
로그: 외부 js 콜백 완료 IE
로그 : 파일 1 콜백 로딩 IE
로그: 파일 2 콜백 로딩 IE
로그: loadjs 1 시작
로그: loadjs 1 완료
로그: loadjs 2 시작
로그: loadjs 2 완료
로그: 파일 2 콜백 완료 IE
로그: 파일 1 콜백 완료 IE

IE9:
로그: 쓰기 시작
로그: 쓰기 완료
로그: 외부 js 콜백 완료 IE
로그: file 1 콜백 로드 IE
로그: file 2 콜백 로드 IE
로그: loadjs 1 시작
로그: loadjs 1 완료
로그: loadjs 2 시작
로그: loadjs 2 완료
로그: 파일 1 콜백 완료 IE
로그: 파일 2 콜백 완료 IE

FIREFOX:
쓰기 시작
쓰기 완료
IE가 아닌 외부 js 콜백
loadjs 1 시작
loadjs 1 완료
file 1 콜백, IE 아님
loadjs 2 시작
loadjs 2 완료
file 2 콜백, NOT IE

CHROME:
쓰기 시작
쓰기 완료
IE가 아닌 외부 js 콜백
loadjs 1 시작
loadjs 1 완료
file 1 콜백, NOT IE
loadjs 2 시작
loadjs 2
파일 2 콜백 완료, IE 아님