집 > 기사 > 웹 프론트엔드 > JavaScript 단일 스레드 비동기 로딩을 위한 세 가지 솔루션

JavaScript 단일 스레드 비동기 로딩을 위한 세 가지 솔루션

php是最好的语言원래의: 2018-08-07 10:18:191607검색

JS를 처음 배웠을 때, 우리는 js가 단일 스레드이고 동기적으로 로드된다는 것을 알았어야 했습니다. 이로 인해 html과 css의 로딩 라인이 차단됩니다(js는 html과 css를 수정할 수 있기 때문입니다).

js 동기 로딩의 단점 : 로딩 도구 방식에서 문서를 차단할 필요는 없습니다. js를 오버로드하면 페이지 효율성에 영향을 미치게 됩니다. 네트워크 속도가 좋지 않으면 전체 웹 사이트는 후속 렌더링 및 기타 작업 없이 js가 로드될 때까지 기다립니다.

JS의 일부 도구와 메소드는 요청 시 로드해야 합니다. 로드해야 합니까? ? ? 이때 js를 비동기적으로 로드해야 합니다.

JavaScript 비동기 로딩을 위한 세 가지 옵션.

1. defer는 비동기적으로 로드되지만 모든 DOM 문서가 구문 분석될 때까지 실행되지 않습니다. IE만 사용하거나 내부적으로 모든 코드를 작성할 수 있습니다

 <script type = "text/javascript" src = "tools.js"  defer = "defer"></script>

<script defer = "defer">
console.log("a");
</script>

2. 비동기 비동기 로딩, 로딩 후에 실행됩니다. 비동기는 외부 스크립트만 로드할 수 있고 스크립트 태그에 js를 작성할 수 없습니다

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

위의 두 가지 방법은 다음과 같습니다. 실행 페이지를 항상 차단하지 않습니다

브라우저 호환성 문제를 해결하기 위해? ? 1, 2, 2의 두 메소드를 동시에 로드하면 코드 중복 및 실행 순서 충돌이 발생하므로 세 번째 메소드를 도입합니다.

3. DOM, 그리고 로딩 후 콜백,

 var script = document.createElement(&#39;script&#39;);
 script.type = "text/javescript";
 script.src = "demo.js";
// 此时就会加载src地址里面的东西
// 此时会有一个灯塔模式，灯塔模式会产生一个img属性，用来存放地址的加载
document.head.appendChild(script);  //----此时就会在页面上展示js里面的内容

외부 js 파일에 테스트 함수를 작성하면

var script = document.createElement(&#39;script&#39;);
script.type = "text/javascript";
script.src = "demo.js";
test();
document.head.appendChild(script);

여기에는 외부 데모.js 파일이 표시되지 않고 그 안에 테스트 함수가 있습니다. 결과는 다음과 같습니다.

JavaScript 단일 스레드 비동기 로딩을 위한 세 가지 솔루션

테스트 기능 실행 시 로딩 시간이 소요되는데, 테스트 실행 시에는 아직 로딩이 되지 않은 상태입니다. 따라서 테스트가 정의되지 않았음을 표시합니다. 이 문제를 어떻게 해결합니까?

먼저 onload 이벤트를 생각해 보겠습니다.

script.onload : 호환성이 매우 좋습니다. Safari chrome firefox Opera는 호환됩니다.

 script.onload = function(){
                                test();
                            }

하지만 IE에는 스크립트에 대한 onload 이벤트가 없습니다. IE에는 script.readyState라는 자체 메서드가 있습니다.

script.readyState: IE의 스크립트에는 상태 코드(readyState)가 있으며, 상태 코드를 검증하여 로드 여부를 결정합니다. IE에서는 script 태그에 ReadyStatechange 이벤트가 있습니다. 이 이벤트는 script.readyState 값이 변경될 때 트리거되는 이벤트를 수신합니다.

(script.readyState == "complete" || script.readyState == "loaded"는 구문 분석이 완료되었음을 의미합니다.)

script.onreadystatechange = function(){
      if(script.readyState == "complete" || script.readyState == "loaded"){
                  callback(); //回调函数：当满足一定条件才可以被执行
              }
                  }

마지막으로 주문형 로딩 기능을 구현하기 위해 함수를 캡슐화합니다.

 function loadScript(url,callback){
                        var script = document.createElement(&#39;script&#39;);
                        script.type = "text/javascript";
                        if(script.readyState){
                            script.onreadyStatechange = function(){
                                if (script.readyState == "loaded" || script.readyState == "complete") {
                                    obj[callback]();
                                }
                            }    
                        }else{
                            script.onload = function(){
                                obj[callback]();
                            }
                        }
                        script.src = url;
                        document.head.appendChild(script);
                    }

                    loadScript(&#39;demo.js&#39;,&#39;test&#39;);

JavaScript 단일 스레드 비동기 로딩을 위한 세 가지 솔루션

관련 기사