비동기 스크립트 로드 기술

많은 웹 애플리케이션은 향상된 기능을 제공하기 위해 여러 스크립트와 CSS 파일을 로드하는 데 의존합니다. 그러나 동기 로딩은 페이지 렌더링 속도를 크게 저하시킬 수 있습니다. 이 문제를 해결하기 위해 이러한 리소스를 비동기식으로 로드하는 여러 가지 방법이 있습니다.

비동기 속성을 사용하여 스크립트 로드

한 가지 접근 방식은 스크립트 태그에서 비동기 속성을 사용하는 것입니다.

이 속성은 다른 리소스의 로드를 차단하지 않고 스크립트를 실행할 수 있음을 브라우저에 신호로 보냅니다. 그러나 종속성이 있는 스크립트는 비동기식으로 로드되는 경우 여전히 문제를 일으킬 수 있다는 점에 유의하는 것이 중요합니다.

사용자 정의 함수 사용

제공된 예에서는 importScripts()라는 사용자 정의 함수를 사용하여 여러 항목을 로드합니다. 스크립트와 스타일시트를 비동기적으로 처리합니다. 그러나 코드에는 페이지가 대화형이 되기 전에 모든 리소스가 로드되었는지 확인하는 콜백 메커니즘이 부족합니다.

JQuery의 $.getScript 메서드 사용

JQuery의 $.getScript() 메서드는 간결한 리소스를 제공합니다. 스크립트를 로드하는 방법 비동기적으로:

$.getScript('js/jquery-ui-1.8.16.custom.min.js', successCallback);

이 메소드는 자동으로 로드된 스크립트이며 선택적 콜백 함수를 제공합니다.

Promise 기반 로딩

최신 브라우저의 경우 Promise 객체를 사용하여 콜백 핸들러를 허용하는 비동기 로딩 함수를 생성할 수 있습니다.

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

이 기능을 사용하면 로드 성공 및 실패 시나리오를 처리할 수 있습니다.

고려 사항

예기치 않은 동작을 방지하려면 스크립트와 스타일시트가 올바른 순서로 로드되는지 확인하는 것이 중요합니다. . 또한 리소스를 비동기식으로 로드하는 것이 페이지 성능을 최적화하기 위한 기본 방법이 되어서는 안 됩니다. 축소, 압축, 요청 수 감소와 같은 기술도 고려해야 합니다.