JavaScript 비동기 로딩(코드 포함)에 대한 자세한 소개

이 글은 JavaScript 비동기 로딩(코드 포함)에 대한 자세한 소개를 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 질문에 대해 이야기하기 전에 또 다른 고빈도 인터뷰 질문부터 시작하겠습니다.

우리 웹 페이지는 파싱의 시작부터 페이지 렌더링이 완료될 때까지 어떤 과정을 거쳤나요?

1. 문서 객체를 생성하고 페이지 구문 분석을 시작합니다. 이때 document.readyState = 'loading'

2. 링크 태그에 의해 소개된 CSS 파일을 만나면 스레드를 생성하고 CSS를 비동기적으로 로드합니다. 문서 파싱

3. 발생 스크립트 태그에 의해 도입된 외부 스크립트의 경우 스크립트 태그의 속성이 defer 또는 async로 설정되면 js를 비동기적으로 로드하는 스레드가 생성되고, 그렇지 않으면 js가 동기적으로 로드됩니다(차단). dom 구문 분석) 및 문서는 계속 구문 분석됩니다(로딩 후 비동기 스크립트가 실행됩니다)

4 img와 같이 리소스를 로드해야 하는 태그를 만나면 dom 태그를 정상적으로 구문 분석하고 src를 비동기적으로 로드한 후 계속합니다. 문서를 구문 분석하려면

5 문서가 구문 분석된 후 document.readyState = 'interactive', 모든 연기 스크립트가 순서대로 실행되고 문서가 트리거됩니다. DOMContentLoaded 이벤트는 동기 스크립트 실행에서 프로그램의 변환을 표시합니다. stage에서 이벤트 중심 스테이지로

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

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

좋아, 말로만 하면 소용없어, 진실은 하나뿐인지 보자. . .

document.onreadystatechange = () => {
    console.log(document.readyState)
};
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded')
});
window.onload = () => {
    console.log('load')
};

DOMContentLoaded 이벤트는 addEventListener로만 바인딩될 수 있습니다.

결과는 다음과 같습니다.

이 순서대로 인쇄됩니다. . .

defer /async가 있는 스크립트만 비동기적으로 로드할 수 있다고 위에서 언급했습니다.

defer는 일부 하위 버전 브라우저와 호환되지 않습니다.

async는 W3C 표준이지만 외부 js 파일인 경우에만 도입될 수 있습니다.

물론 우리가 가장 일반적으로 사용하는 것은 DOM 구문 분석을 차단하지 않도록 본문 뒤에 스크립트 태그를 넣는 것입니다.

동적으로 추가되는 스크립트 스크립트가 있는 또 다른 상황이 있습니다. 또한 이를 기반으로 스크립트 스크립트 함수의 비동기 로딩을 캡슐화합니다

function loadScript (url, callback) {  // 传入url , 和要执行的回调函数
    const script = document.createElement('script');
    script.type = 'text/javascript';  // 创建一个script标签
    if (script.readyState) {   // 做兼容
        script.onreadystatechange = () => {  // readyState变化触发
            if (script.readyState === 'complete' || script.readyState === 'loaded') { // 兼容
                callback();  // 加载完执行回调            }
        }
    } else {
        script.onload = () => {
            callback();  // 加载完执行回调        }
    }
    script.src = url;
    document.head.appendChild(script);  // 插入head中}

위는 js 비동기 로딩의 모든 내용입니다. 친구가 추가하는 것을 환영합니다

위 내용은 JavaScript 비동기 로딩(코드 포함)에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!