집 >웹 프론트엔드 >JS 튜토리얼 >js 파일(코드 포함)의 비동기 로딩 방법 요약

js 파일(코드 포함)의 비동기 로딩 방법 요약

不言원래의: 2018-08-23 14:07:341709검색

이 기사는 js 파일의 비동기 로딩 방법(코드 포함)에 대한 요약을 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

비동기 로딩 이유: 동기 로딩은 브라우저의 후속 처리를 차단합니다. 즉, 다음 파일(예: 이미지) 로딩은 현재 로딩 이후에만 수행될 수 있습니다. 파일이 로드되고, 렌더링되고, 코드가 실행됩니다. js에서 문서 내용 출력, DOM 수정, 리디렉션 등의 동작이 있으면 페이지 차단이 발생합니다.

비동기 로딩이란: 비동기 로딩은 브라우저의 후속 작업을 차단하지 않습니다. 즉, js를 로드하고 실행하는 동안 다른 파일이 병렬로 로드되어 페이지.

방법 1: async 속성
async 속성은 js 파일이 사용 가능한 즉시 실행되고 스크립트는 다음을 기준으로 비동기적으로 실행되도록 지정합니다. 페이지의 나머지 부분 (페이지가 계속될 때 구문 분석시 스크립트가 실행됨)

async 속성은 외부 스크립트에만 적용됩니다 (src 속성을 사용할 경우에만).

async 속성은 실행 순서를 보장하지 않습니다.

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

방법 2: defer attribute
defer 속성은 페이지가 로드될 때까지 스크립트 실행을 지연할지 여부를 지정합니다.

defer 속성은 스크립트가 문서의 내용을 변경하지 않는다는 것을 의미합니다. 브라우저는 스크립트를 실행하지 않고도 문서의 나머지 부분을 안전하게 읽을 수 있다는 것을 알고 있습니다. 문서가 사용자에게 표시될 때까지 스크립트. 문서 처리 속도를 높이기 위해.

Internet Explorer에서만 defer 속성을 지원합니다.

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

방법 3: 동적으로 DOM 생성
JS 소스가 필요하지 않습니다.

이 코드는 태그 앞에 배치되어야 합니다(HTML 파일 하단 근처).

이 로딩 방법을 사용하면 onload 이벤트가 이전에 트리거되는 것을 방지할 수 있습니다. 로딩이 완료되고 이제 많은 페이지의 코드가 로딩 중에 추가 렌더링 작업을 수행해야 하므로 일부 페이지의 초기화 처리가 여전히 차단됩니다.

<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = document.createElement("script");
        element.src = "defer.js";
        document.body.appendChild(element);
    }     
</script>

방법 4: onload 시 동적으로 DOM 생성
js 원본이 필요하지 않음

이 코드는 태그 앞에 배치되어야 합니다. (HTML 파일 하단 부근)

이 로딩 방법은 js의 비동기 로딩을 즉시 시작하지 않고 onload에서만 비동기 로딩을 시작합니다. 이는 onload 이벤트 트리거를 차단하는 문제를 해결합니다.

<script type="text/javascript">    
function downloadJSAtOnload() {        
var element = document.createElement("script");
        element.src = "defer.js";        
        document.body.appendChild(element);
    }    
    if (window.addEventListener)        
    window.addEventListener("load", downloadJSAtOnload, false);    
    else if (window.attachEvent)        
    window.attachEvent("onload", downloadJSAtOnload);    
    else window.onload = downloadJSAtOnload;
</script>

js 파일(코드 포함)의 비동기 로딩 방법 요약

관련 기사