js를 비동기적으로 로드하는 방법은 무엇입니까? js를 비동기적으로 로딩하는 방법 소개
- 青灯夜游앞으로
- 2019-01-05 10:33:363082검색
JS를 비동기적으로 로드하는 방법은 무엇인가요? 이 기사에서는 js를 비동기적으로 로드하는 세 가지 방법을 소개합니다. 이는 특정 참고 가치가 있으므로 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. [동영상 튜토리얼 추천: JavaScript 동영상 튜토리얼]
js 로딩 타임라인:
js가 탄생하는 순간을 기준으로 브라우저가 순서대로 수행하는 일련의 로딩 순서를 설명합니다. , 이론적 근거를 최적화하는 데 사용할 수 있는 내용을
1 암기하고 문서 개체를 만들고 웹 페이지 구문 분석을 시작합니다. HTML 요소와 해당 텍스트 내용을 구문 분석한 후 문서에 요소 개체와 텍스트 노드를 추가합니다. 이 단계에서는 document.readyState = 'loading'입니다. (문서 개체가 생성되고 문서 상태 비트가 로드 중으로 변경됩니다.)
2.링크 외부 CSS를 만나면 로드할 스레드를 생성하고 문서를 계속 구문 분석합니다.
3 스크립트 외부 js가 발생하고 async 또는 defer가 설정되지 않은 경우 브라우저는 로드 및 차단되고 js가 로드될 때까지 기다린 후 스크립트를 실행한 다음 계속해서 문서를 구문 분석합니다.
4 스크립트 외부 js를 발견하고 비동기 및 지연을 설정하면 브라우저는 로드할 스레드를 생성하고 문서를 계속 구문 분석합니다. 비동기 속성이 있는 스크립트의 경우 스크립트가 로드된 후 즉시 실행됩니다. (document.write()를 비동기적으로 사용하는 것은 금지되어 있습니다.)
document.write(): 내용을 HTML 문서로 페이지에 출력하기 때문에 특히 특별하지만, 한 가지 사실은 전체 문서가 완전히 구문 분석이 거의 완료되면 document.write()를 사용하면 이전 문서 스트림이 모두 지워지고 해당 문서 스트림으로 대체됩니다
예: 전체 페이지에는 a만 표시됩니다. 여기에서는 document.write() ; 문서 흐름을 제거하는 기능이 있으며 스크립트도 제거됩니다.
<p style="height:100px;width:100px;background-color:red;"></p>
<script type="text/javascript">
window.onload = function(){
document.write('a');
}
</script>5, img 등을 만나면 먼저 dom 구조를 정상적으로 구문 분석한 다음 브라우저가 src를 비동기적으로 로드하고 계속해서 문서를 구문 분석합니다.
6. 문서 구문 분석이 완료되면 document.readyState = 'interactive'입니다.
먼저 구문 분석한 다음 로드한 다음 상태 비트가 대화형(활성)으로 변경됩니다.
상태 비트 전환 보기:
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}7 문서 구문 분석이 완료되면 defer로 설정된 모든 스크립트가 실행됩니다. 순서대로. (비동기와 다르지만 (document.write()) 사용도 금지됩니다.
8, 문서 객체는 DOMContentLoaded 이벤트를 트리거하며, 이는 또한 동기 스크립트에서 프로그램 실행의 변환을 표시합니다.
예제 1: 인쇄와 완료를 동시에 수행하며 onDOMContentLoaded는 addEventListener에 바인딩된 경우에만 사용할 수 있습니다.
console.log(document.readyState);
document.onreadystatechange = function(){
console.log(document.readyState);
}
document.addEventListener('DOMContentLoaded',function(){
console.log('a');
},false)예제 2: 차이점 window.onload와 다음은
$(document).ready(function(){
//当DOM解析完就执行的部分（不用加载完，加载完是给用户看的，对于我们来说解析完就可以操作了）
/*它的原理就是interactive和DOMContentLoaded事件*/
})차이는 다음과 같습니다. window..onload는 필요에 따라 로드되지만 파싱된 후에 작동할 수 있습니다(jQuery 방식입니다)
예 3: 스크립트를 에 배치하는 경우 onload를 쓰지 말고 절대 onload를 쓰지 않는 것이 가장 좋습니다. 하지만 가장 좋은 방법은 여전히 아래에 작성되어 있습니다
<head>
<meta charset="UTF-8">
<title>lottery</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',function(){
var p = document.getElementsByTagName('p')[0];
console.log(p);
},false)
</script>
script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完
</head>
//script标签写在上面又能处理下面的代码，而且效率还高，因为登高DOM解析完就执行，而不是DOM加载完9 모든 비동기 스크립트가 로드되고 실행되고 img 등이 완료됩니다. loaded, document.readyState = 'complete'이고 창 개체가 로드 이벤트
.10를 트리거합니다. 이제부터 사용자 입력, 네트워크 이벤트 등은 비동기 응답 방식으로 처리됩니다.
요약은 다음과 같습니다. 포인트: 먼저 문서 객체가 생성됩니다. 즉, js를 실행할 수 있습니다. 두 번째 단계는 문서 구문 분석을 완료하고 세 번째 단계는 문서를 로드하는 것입니다.
js를 비동기적으로 로드하는 세 가지 방법을 살펴보세요:
js를 비동기적으로 로드하는 방법:
1), 비동기 HTML5 속성을 사용하면 JavaScript 코드를 비동기적으로 로드할 수 있습니다.
36fa79bca5f3317b9acb41ac36f86b382cacc6d41bbb37262a98f745aa00fbf0
2)defer 이전 버전의 IE에 특별함
76cd4913e6ee9a69d0dba4fc797cdc002cacc6d41bbb37262a98f745aa00fbf0
3) 스크립트 태그를 동적으로 생성합니다(h5 이하 버전의 IE와의 호환성 문제를 해결할 수 있음). 코드는 다음과 같습니다.
8019067d09615e43c7904885b5246f0a
function asyncLoaded(url,callback){
var script = document.createElement("script");
// script.src = url; 假如说网速非常好，直接执行完成了，后面就监听不到状态的改变了
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == "complete" || script.readyState =="loaded"){
// 执行某个函数
callback()
}
}
}else{
script.onload = function(){
// 执行某个函数
callback()
}
}
script.src = url; //异步的过程
document.head.appendChild(script)
}
asyncLoaded("05.js",function(){
fn() //05.js中的函数
})
2cacc6d41bbb37262a98f745aa00fbf0
위는 이 글의 전체 내용입니다. 도움이 되기를 바랍니다. 모두의 공부. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !
위 내용은 js를 비동기적으로 로드하는 방법은 무엇입니까? js를 비동기적으로 로딩하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!