자바스크립트를 비동기적으로 로드할 수 있나요?

JavaScript는 비동기적으로 로드될 수 있습니다. 비동기 로딩은 브라우저가 JavaScript를 다운로드하고 실행하는 동안 후속 페이지를 계속 처리한다는 것을 의미합니다. 이는 각 브라우저에서 스크립트 파일을 구문 분석하기 위한 다양한 메커니즘을 포함하므로 스크립트 파일 로딩을 최적화하고 페이지 로딩 속도를 향상시킬 수 있습니다. 비동기 로딩.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript를 비동기식으로 로드할 수 있나요

1. 먼저 비동기식과 동기식이 무엇인지 이해해야 합니다.

동기식 로딩: 차단 모드라고도 알려진 동기식 모드는 브라우저의 후속 처리를 방지하고 후속 구문 분석을 중지합니다. 이므로 후속 파일 로드(예: 이미지), 렌더링 및 코드 실행이 중지되었습니다.

비동기 로딩: 비동기 로딩은 비차단이라고도 합니다. 브라우저는 js를 다운로드하고 실행하는 동안 계속해서 후속 페이지를 처리합니다.

평신도의 용어로, 동기화는 당신이 나에게 저녁 먹으러 가자고 하면 내가 당신의 말을 들을 때 당신과 함께 식사하러 갈 것이라는 것을 의미합니다. 너, 그럼 같이 밥 먹으러 가자.

비동기식은 저한테 전화하고 혼자 밥 먹으러 간다는 뜻이에요. 소식 듣고 바로 나갈 수도 있고, 퇴근할 때까지 기다려서 밥 먹을 수도 있어요. 그러므로 내가 당신에게 식사를 대접하고 싶다면 동기식을 사용하고, 나에게 식사를 대접하려면 비동기식을 사용하면 비용을 절약할 수 있습니다.

2. 페이지 로딩 속도를 향상시키기 위해 스크립트 파일 로딩을 최적화하기 위해 비동기

를 사용해야 하는 이유는 항상 페이지 로딩 속도를 향상시키는 것이 매우 중요했습니다. 각 브라우저에는 스크립트 파일을 구문 분석하는 메커니즘이 다르며 스크립트를 로드하면 다른 리소스 및 파일의 로드가 차단되므로 비동기 로드가 더 일반적으로 사용됩니다.

3. 비동기 사용 방법

편집자는 비동기 로딩을 사용하는 방법에는 세 가지가 있다고 믿습니다.

async는 로드 후 실행되며 외부 스크립트만 로드할 수 있으며 js는 스크립트 태그에 작성할 수 없습니다.

//1.async  只能加载外部脚本
<script src="js/index.js" async="async"></script>

defer는 비동기적으로 로드되지만 dom 문서가 완전히 구문 분석될 때까지 실행되지 않습니다. IE에서만 내부 및 외부 js를 사용할 수 있습니다

//2.defer  只能IE使用，文档解析完成以后才会去执行
<script src="js/index.js" defer="defer"></script>

요청 시 로드, 브라우저 호환성 고려

//3.按需求加载，考虑浏览器兼容
    function loadScript(url,callback){
            var script = document.createElement("script");
            
            if(script.readyState){  IE浏览器兼容
                script.onreadystatechange = function(){
                    if(script.readyState == "complete" || script.readState == "loaded"){
                        callback()
                    }
                }
            }else{         大部分浏览器兼容
                script.onload = function(){  
                    callback()
                }
            }
            script.src = url;
            document.head.appendChild(script)
        }
        loadScript("08.js",function(){
            test()
        })
//外部js
function test(){
    console.log("hello world")
}

js 로딩 타임라인

1. 문서 개체를 만들고 웹 페이지 구문 분석을 시작합니다. HTML 요소와 해당 텍스트 콘텐츠를 구문 분석한 후 문서에 요소 개체와 텍스트 노드를 추가합니다. 이 단계에서는 document.readyState = 'loading'입니다.

2. 외부 CSS 링크가 발생하면 스레드를 생성하여 로드하고 문서를 계속 구문 분석합니다.

3. async 또는 defer가 설정되지 않은 외부 js가 발생하면 브라우저는 로드 및 차단되고 js가 로드될 때까지 기다린 후 스크립트를 실행한 다음 계속해서 문서를 구문 분석합니다.

4. 스크립트 외부 js를 발견하고 비동기 및 지연을 설정하면 브라우저는 로드할 스레드를 생성하고 문서를 계속 구문 분석합니다. 비동기 속성이 있는 스크립트의 경우 스크립트가 로드된 후 즉시 실행됩니다. (document.write()의 비동기 사용은 금지됩니다.)

5.img 등이 발생하면 먼저 dom 구조를 정상적으로 구문 분석한 다음 브라우저가 src를 비동기적으로 로드하고 계속해서 문서를 구문 분석합니다.

6. 문서 파싱이 완료되면 document.readyState = 'interactive'입니다.

7. 문서 파싱이 완료되면 defer로 설정된 모든 스크립트가 순서대로 실행됩니다. (비동기와 다르지만 document.write() 사용도 금지됩니다.)

8. 문서 개체는 프로그램 실행을 동기 스크립트 실행 단계에서 다음 단계로 변환하는 DOMContentLoaded 이벤트를 트리거합니다. 이벤트 중심의 무대.

9. 모든 비동기 스크립트가 로드되고 실행되고 img 등이 로드되면 document.readyState = 'complete', window 객체가 로드 이벤트를 트리거합니다.

10. 이제부터 사용자 입력, 네트워크 이벤트 등은 비동기 응답 방식으로 처리됩니다.

관련 권장 사항: javascript 학습 튜토리얼

위 내용은 자바스크립트를 비동기적으로 로드할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!