HTML5 및 js 동기화 및 비동기 로딩 구현 코드의 스크립트 속성에 대한 자세한 설명

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

1、 
<script> 
//同步加载执行的代码 
</script> 
2、 
<script src="xx.js"></script> //同步加载执行xx.js中的代码 
3、 
<script> 
document.write(&#39;<script src="xx.js"><\/script>&#39;); //异步加载执行xx.js中的代码 
</script> 
4、 
<script src="xx.js"></script>

xx.js에는 다음 코드가 있습니다.

document.write(&#39;<script src="11.js"><\/script>&#39;); 
document.write(&#39;<script src="22.js"><\/script>&#39;);

그러면 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에서는 더 이상 document.write를 사용하여 xx.j의 비동기 로드 실행을 수행할 수 없습니다). () )는 문서에 내용을 쓰지만, Firefox와 IE는 문서가 닫히기 전에 쓸 수 있습니다(문서가 닫히는 것을 방지하기 위해 HTML에서 경고를 사용하는 방법입니다))
Test: 11.js의 경고()(하지 마세요. for 루프를 사용하여 찾아보기 프로세서는 단일 스레드에서 실행되며 코드 조각을 계속 실행하면 나머지 코드가 차단됩니다. 22.js의 console.log()에서 다음을 볼 수 있습니다.
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(){ 
//script 标签，IE 下有 onreadystatechange 事件, w3c 标准有 onload 事件 
//这些 readyState 是针对IE8及以下的，W3C 标准的 script 标签没有 onreadystatechange 和 this.readyState , 
//文件加载不成功 onload 不会执行， 
//(!this.readyState) 是针对 W3C标准的, IE 9 也支持 W3C标准的 onload 
if ((!this.readyState) || this.readyState == "complete" || this.readyState == "loaded" ){ 
callback(); 
} 
}//end onreadystatechange 
}

4번째 테스트 포인트(동기 로딩)(위치에 경고 삽입) 로딩 중 차단을 쉽게 확인할 수 있습니다.)

위 내용은 HTML5 및 js 동기화 및 비동기 로딩 구현 코드의 스크립트 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!