AppendChild (ScriptNode)에 소개 된 모든 JS 파일은 비동기 적으로 실행됩니다 (ScriptNode는 문서에 삽입되어야하며 노드를 작성하고 SRC 설정 만 IMG 및로드와 다른 JS 파일을로드하지 않습니다).
HTML 파일의 <cript> 태그의 코드 또는 SRC에서 참조 한 JS 파일의 코드가로드되어 동기식으로 실행됩니다.
html 파일의 <cript> 태그의 코드는 document.write () 메소드를 사용하여 비동기 적으로 실행됩니다.
Document.write () 메소드를 사용하여 소개 된 JS 파일은 HTML 파일의 SRC 속성에서 참조 한 JS 파일의 코드에서 동기식으로 실행됩니다.
1.
<cript> // 실행 된 코드의 동기로드 </script>
2.
<script src = "xx.js"> </script> // xx.js에서 코드를 동기로로드하고 실행합니다
3.
<cript> document.write ( '<<script src = "xx.js"> <// script>'); // xx.js </script>에서 코드를 실행하기위한 비동기로드 <
4.
<script src = "xx.js"> </script>
xx.js에는 다음 코드가 있습니다.
document.write ( '<script src = "11.js"> <// script>'); document.write ( '<script src = "22.js"> <// script>');
그런 다음 xx.js, 11.js 및 22.js가 동시에로드되어 실행됩니다.
xx.js가 삽입에 비동기로로드되면 11.js 및 22.js는 여전히 동기로로드됩니다 (비동기식의 동기, 즉이 두 파일의로드는 순서대로).
테스트 : 11의 Alert, 22의 Document.write ()에서 22의 쓰기 문이 차단되었음을 알 수 있습니다.
5.
다음 방식으로 XX.JS는 AppendChild가 실행 된 후 비동기식으로로드 및 실행됩니다.
var script = document.createElement ( "script"); script.setattribute ( "src", "xx.js"); documenrt.getElementsByTagName ( "Head") [0] .appendChild (script);
JS 파일을로드하는 함수 :
var loadjs = function (url, 콜백) {var head = document.getElementsByTagName ( 'head') [0], script = document.createElement ( 'script'); script.src = url; script.type = "text/javaScript"; Head.appendChild (스크립트); script.onload = script.onreadyStateChange = function () {// 스크립트 태그, IE 아래에 onreadyStateChange 이벤트가 있습니다. W3C 표준은 onload 이벤트를 보유하고 있습니다. // readystates는 IE8 이하 이하입니다. W3C 표준은 스크립트 태그 가이 준비 상태가 아니기 때문에 파일로드가 성공하지 못할 것입니다. (! this.readystate)는 ((! this.readystate) || this. this. } else {alert ( "js 파일을로드 할 수 없음")}}}포인트 4 테스트의 경우 (삽입 경보가 로딩 중에 차단을 쉽게 볼 수 있습니다)
tryjs.html
<! docType html> <html> <head> <meta http-equiv = "content-type"content = "text /html; charset = utf-8" /> <script src = "tryjs.js"onload = "if (! document.all) {console.log ( 'outer js callback, re'). OnreadyStateChange = "Console.Log ( 'OUTER JS CALLBACK', this.ReadyState, 'IE');"> </script> <body> </body> </html> tryjs.js
console.log ( '쓰기 시작'); document.write ( '<script src = "try.1.js"onreadyStateChange = "console.log (/'파일 1 콜백/', this.readystate ,/'ie/');"onload = "if (! document.all) {console.log (/'파일 1 Callback, ie. /'); }"><//script> ');document.write ( '<<< 2.js "on readreadystatechange ="console.log (/'파일 2 콜백/', this.readystate ,/'IE/'); "onload ="if (! docut /'); }"><//script> ');console.log('Write 완성 '); try.1.js
console.log ( 'loadjs 1 begin'); console.log ( 'loadjs 1 완료');
시도 .2.js
console.log ( 'loadjs 2 begin'); console.log ( 'loadjs 2 완성');
테스트 결과 (파일 2 및 파일 1의 콜백 완료는 IE7/8/9 순서에서 불확실합니다)
즉 7 :
로그 : 외부 JS 콜백로드 IE
로그 : OUTER JS CALLBACK IE
로그 : 쓰기 시작
로그 : 작성 완료
로그 : OUTER JS CALLBACK COMPLETE IE
로그 : 파일 1 콜백로드 IE
로그 : 파일 2 콜백로드 IE
로그 : loadjs 1 시작
로그 : loadjs 1이 완료되었습니다
로그 : loadjs 2 시작
로그 : loadjs 2가 완료되었습니다
로그 : 파일 2 콜백 완료 IE
로그 : 파일 1 콜백 완료 IE
IE8 :
로그 : 외부 JS 콜백로드 IE
로그 : OUTER JS CALLBACK IE
로그 : 쓰기 시작
로그 : 작성 완료
로그 : OUTER JS CALLBACK COMPLETE IE
로그 : 파일 1 콜백로드 IE
로그 : 파일 2 콜백로드 IE
로그 : loadjs 1 시작
로그 : loadjs 1이 완료되었습니다
로그 : loadjs 2 시작
로그 : loadjs 2가 완료되었습니다
로그 : 파일 2 콜백 완료 IE
로그 : 파일 1 콜백 완료 IE
IE9 :
로그 : 쓰기 시작
로그 : 작성 완료
로그 : OUTER JS CALLBACK COMPLETE IE
로그 : 파일 1 콜백로드 IE
로그 : 파일 2 콜백로드 IE
로그 : loadjs 1 시작
로그 : loadjs 1이 완료되었습니다
로그 : loadjs 2 시작
로그 : loadjs 2가 완료되었습니다
로그 : 파일 1 콜백 완료 IE
로그 : 파일 2 콜백 완료 IE
Firefox :
쓰기 시작
작성 완료
외부 JS 콜백, 즉
loadjs 1 시작
loadjs 1 완료
파일 1 콜백이 아닙니다
loadjs 2 시작
Loadjs 2가 끝났습니다
파일 2 콜백, 즉
크롬:
쓰기 시작
작성 완료
외부 JS 콜백, 즉
loadjs 1 시작
loadjs 1 완료
파일 1 콜백이 아닙니다
loadjs 2 시작
Loadjs 2가 끝났습니다
파일 2 콜백, 즉
위의 것은 JS 파일 참조 방법과 편집기가 귀하에게 가져 오는 동기 실행 및 비동기 실행에 대한 간단한 논의입니다. 모든 사람에게 도움이되기를 바랍니다. Wulin.com 더 지원 ~