js 파일 인용 방식 및 동기화 실행 및 비동기화 실행

append Child (scriptNode) 방식으로 도입된 js 파일은 모두 비동기적으로 실행됩니다. (scriptNode는 document에 삽입해야 합니다. 노드와 src 설정만 만들면 js 파일을 불러오지 않습니다. 이것은 img의 불러오는 것과 다릅니다.)
html 파일의 탭의 코드나 src에서 인용한 js 파일의 코드는 동기적으로 불러오고 실행됩니다
html 파일의 탭의 코드는document를 사용합니다.write () 방식으로 도입된 js 파일은 비동기적으로 실행됩니다.
html 파일의 탭 src 속성이 인용한 js 파일의 코드에서document를 사용합니다.write () 방식으로 도입된 js 파일은 동기화되어 실행됩니다
1、


<script>
//同步加载执行的代码
</script>

2、


<script src="xx.js"></script> //同步加载执行xx.js中的代码

3、


<script>
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는 모두 동시 불러오고 실행됩니다.
하면, 만약, 만약...js는 삽입 방식으로 비동기적으로 불러옵니다.js와 22.js는 여전히 동기화 불러옵니다. (이동기화 중의 동기화, 즉 이 두 파일의 불러오는 것은 선후 순서로 나뉩니다.)
테스트: 11중alert, 22중document.write (), 22에 쓰여진 문장이 막히는 것을 볼 수 있습니다
5、
다음 방식, xx.js는 append Child 실행 후 비동기적으로 불러옵니다.

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

js 파일을 로드하는 함수:


var loadJS = function(url,callback){ 
var head = document.getElementsByTagName('head')[0],  
script = document.createElement('script');  
script.src = url;  
script.type = "text/javascript";  
head.appendChild( script);
  script.onload = script.onreadystatechange = function(){
//script 标签，IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件   
//这些 readyState 是针对IE8及以下的，W3C 标准因为script 标签没有这个 onreadystatechange 所以也不会有 this.readyState , 
// 好在文件加载不成功 onload 不会执行，(!this.readyState) 是针对 W3C标准的
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
 callback();   
 }
 else
 {     
 alert("can not load the js file")   
 }  
 }
 }

네 번째 점에 대한 테스트 (그 중에서alert를 삽입하면 불러올 때 막히는 것을 쉽게 볼 수 있습니다)
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, not IE');}" 
onreadystatechange="console.log('outer js callback ',this.readyState,' IE');"></script>


<body>

</body>
</html>

tryjs.js


console.log('write begin');
document.write('<script src="try.1.js" onreadystatechange="console.log(\'file 1 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 1 callback,NOT IE \');}"><\/script>');
document.write('<script src="try.2.js" onreadystatechange="console.log(\'file 2 callback \',this.readyState,\' IE\');" onload="if(!document.all){console.log(\'file 2 callback,NOT IE \');}"><\/script>');
console.log('write finished');

try.1.js


console.log('loadjs 1 begin');
console.log('loadjs 1 finished');

try.2.js


console.log('loadjs 2 begin');
console.log('loadjs 2 finished');

테스트 결과(file 2 및 file 1의 callback complete는 IE7\8\9 순서로 불확정)
IE 7:
로그: outer js callback loading IE
로그: outer js callback loaded IE
로그:write begin
로그: write finished
로그: outer js callback complete IE
로그: file 1 callback loading IE
로그: file 2 callback loading IE
로그:loadjs 1 begin
로그:loadjs 1 finished
로그:loadjs 2 begin
로그:loadjs 2 finished
로그: file 2 callback complete IE
로그: file 1 callback complete IE
IE8:
로그: outer js callback loading IE
로그: outer js callback loaded IE
로그:write begin
로그: write finished
로그: outer js callback complete IE
로그: file 1 callback loading IE
로그: file 2 callback loading IE
로그:loadjs 1 begin
로그:loadjs 1 finished
로그:loadjs 2 begin
로그:loadjs 2 finished
로그: file 2 callback complete IE
로그: file 1 callback complete IE
IE9:
로그:write begin
로그: write finished
로그: outer js callback complete IE
로그: file 1 callback loading IE
로그: file 2 callback loading IE
로그:loadjs 1 begin
로그:loadjs 1 finished
로그:loadjs 2 begin
로그:loadjs 2 finished
로그: file 1 callback complete IE
로그: file 2 callback complete IE
FIREFOX:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE
CHROME:
write begin
write finished
outer js callback, not IE
loadjs 1 begin
loadjs 1 finished
file 1 callback,NOT IE
loadjs 2 begin
loadjs 2 finished
file 2 callback,NOT IE
이상은 여러분이 가져온 간단한 js파일 인용 방식과 동기화 집행과 비동기화 집행의 모든 내용입니다. 여러분께 도움이 되고 많은 응원 부탁드립니다~

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

페이지 네이션 동기 비동기

rails 앱에서 을 사용하여 페이지 네이션 기능을 구현하려고합니다. 이번에 사용한 앱→ 사용자 목록 (색인)을 표시하는 페이지 구현 동기 처리, 비동기 처리 모두 구현 Rails 5.2.2 사용자 목록 페이지가 있...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 파일 인용 방식 및 동기화 실행 및 비동기화 실행

좋은 웹페이지 즐겨찾기