[Javascript]외부 자바스크립트 파일을 링크 하는 방법 정리(async, defer)

안녕하세요 미나라이입니다.

이번에는 HTML파일에 외부 자바스크립트 파일을 링크하는 방법 및 링크 위치에 따라 처리가 어떻게 되는지 간단하게 정리해보았습니다.

링크 방법

동일 경로에 파일이 존재 할 경우

<script src="jslink.js"></script>

js라는 폴더 안에 있는 자바스크립트 파일을 링크 할 경우

<script src="./js/jslink2.js"></script>

상위 경로에 있는 자바스크립트 파일을 링크 할 경우

<script src="../jslink3.js"></script>

링크 위치에 따른 처리 순서

동기처리

동기처리중에는 스크립트의 다운로드, 실행 및 Body Parsing을 순차적으로 실행합니다.

Header에 링크 추가

HTML Header에 스크립트 링크를 추가 했을 경우입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jslink.js"></script>
</head>
<body>
</body>
</html>

처리 순서

먼저 스크립트 파일을 다운로드 받고 실행시킵니다. 그리고 나서 HTML의 요소를 뿌려줍니다.

장점 - 스크립트 파일을 먼저 읽고 실행하기 때문에 태그에 정의한 스크립트 요소를 문제없이 실행 시킬 수 있습니다.

단점 - 스크립트 파일의 용량이 거대해서 다운로드가 오래걸린다면 그만큼 HTML태그들을 화면을 뿌려주는데 시간이 오래 걸리게 됩니다.

Body아래쪽에 링크 추가

HTML Body 아래쪽에 스크립트 링크를 추가 했을 경우입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
</head>
<body>
<!-- body처리 부분 -->
<script src="jslink.js"></script>
</body>
</html>

처리 순서

먼저 HTML요소들을 뿌려주고 스크립트 파일을 다운받고 실행합니다.

장점 - HTML요소들을 먼저 뿌려주기 때문에 화면이 빠르게 랜더링 되는 느낌을 받을 수 있습니다.

단점 - 스크립트 파일에 의존하는 태그가 있을 경우 그 부분은 처리가 늦게 되거나 문제가 발생할 수 있습니다.

비동기처리

비동기 처리는 스크립트 다운로드를 진행하면서 HTML Parsing도 동시에 진행하는 처리입니다.

화면 랜더링의 효율을 높히고 싶은 경우에 사용됩니다.

async

스크립트 링크에 async라는 속성을 추가했을 경우의 처리 순서입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script async src="jslink.js"></script>
</head>
<body>
</body>
</html>

처리순서

async를 추가하면 해당 스크립트를 다운로드 받으면서 Body의 요소를 뿌려주고 스크립트를 다운로드 받으면 Body의 요소를 뿌려주는 것을 중지하고 스크립트를 실행합니다.

장점 - 다운로드와 HTML요소를 뿌려주는 행동을 동시에 함으로써 화면 처리의 효율이 올라갑니다.

단점 - HTML요소를 뿌려주는 중에 다운로드가 완료되면 중간에 실행해 버려서 위와 마찬가지로 스크립트 파일에 의존하는 태그가 있을 경우 그 부분에 대해서는 처리가 늦게 되거나 문제가 발생할 수 있습니다. 그리고 다수의 파일을 링크했을 경우에 다운로드가 먼저 된 파일부터 실행하기 때문에 실행 순서가 꼬일 수도 있습니다.

defer

스크립트 링크에 defer라는 속성을 추가했을 경우의 처리 순서입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script defer src="jslink.js"></script>
</head>
<body>
</body>
</html>

처리순서

defer를 추가하면 해당 스크립트를 다운로드 받으면서 Body의 요소를 뿌려주고 스크립트를 다운로드 받으면 Body의 요소를 뿌려주는 것을 끝내고 스크립트를 실행합니다.

장점 - 다운로드와 HTML요소를 뿌려주는 행동을 동시에 함으로써 화면 처리의 효율이 올라갑니다. 그리고 또한 HTML요소를 전부 뿌려주고 스크립트를 실행하기 때문에 충돌되는 요소도 발생하지 않아서 안전합니다.(가장 추천하는 속성)

또한 다수의 스크립트 파일을 링크 한다고 해도선언한 순서대로 실행하기 때문에 순서가 겹칠 일도 없습니다.

이상으로 간단하게 스크립트 파일의 링크 방법 및 링크 위치에 따른 처리에 대해서 알아보았습니다.

728x90

저작자표시

'Web > JavaScript&JQuery' 카테고리의 다른 글

[Javascript]자바스크립트 함수 정리 (2)	2022.01.05
[Javascript]자바스크립트 변수 정리 + Hoisting (1)	2022.01.03
[Javascript/JQuery]CheckBox의 Check한 값 가져오기 / Check값 적용하기 (0)	2021.12.10
[Javascript/JQuery]SelectBox에 선택된 값과 텍스트 가져오기 (0)	2021.12.09
[JQuery]Input Text에 반각 숫자만 입력 받게 하기(일본어 전각 > 반각 변환) (0)	2021.12.08

미나라이의 일상생활

[Javascript]외부 자바스크립트 파일을 링크 하는 방법 정리(async, defer)