js를 비동기적으로 로드하는 방법은 무엇입니까? js를 비동기적으로 로딩하는 방법 소개-JS 튜토리얼-php.cn

js를 비동기적으로 로드하는 방법은 무엇입니까? js를 비동기적으로 로딩하는 방법 소개

青灯夜游

풀어 주다： 2019-01-05 10:33:36

앞으로

3041명이 탐색했습니다.

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(&#39;a&#39;);
    }
</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(&#39;DOMContentLoaded&#39;,function(){
      console.log(&#39;a&#39;);
},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(&#39;DOMContentLoaded&#39;,function(){
            var p = document.getElementsByTagName(&#39;p&#39;)[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 코드를 비동기적으로 로드할 수 있습니다.

<script type="text/javascript" src="05.js" async="async"></script>

로그인 후 복사

2)defer 이전 버전의 IE에 특별함

<script type="text/javascript" defer="defer"></script>

로그인 후 복사

3) 스크립트 태그를 동적으로 생성합니다(h5 이하 버전의 IE와의 호환성 문제를 해결할 수 있음). 코드는 다음과 같습니다.

<script type="text/javascript">
            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中的函数
            })
        </script>

로그인 후 복사

위는 이 글의 전체 내용입니다. 도움이 되기를 바랍니다. 모두의 공부. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 관련 튜토리얼 열을 주의 깊게 살펴보세요! ! !

위 내용은 js를 비동기적으로 로드하는 방법은 무엇입니까? js를 비동기적으로 로딩하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!