자바스크립트 연동과 로딩 전략 (defer, async)

자바스크립트 코드를 HTML 문서에 연결하는 방법과 브라우저가 스크립트를 다운로드하고 실행하는 로딩 전략은 웹페이지의 초기 렌더링 성능과 자바스크립트 에러 방지에 매우 중요합니다.

스크립트 로딩의 3가지 방식

렌더링 차단

기본 <script>

HTML 파싱을 멈추고 스크립트를 다운로드 및 실행합니다. <head>에 넣으면 화면이 늦게 뜹니다.

비동기 다운로드

async 속성

HTML과 병렬로 다운로드하지만, 끝나면 즉시 HTML 파싱을 멈추고 실행합니다. 실행 순서가 보장되지 않습니다.

현대 웹의 표준

defer 속성

병렬로 다운로드하되, HTML 파싱이 완전히 끝난 후에 다운로드된 순서대로 실행합니다.

과거에는 스크립트 실행 시점에 HTML 문서(DOM)가 준비되지 않아 에러가 나는 것을 막기 위해 <body> 태그 맨 끝에 스크립트를 작성했습니다. 하지만 최신 웹 개발에서는 <head> 태그 안에 defer 속성을 추가하여 스크립트를 로드하는 것이 최고의 모범 사례(Best Practice)입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JS 로딩 전략</title>
    <!-- 1. 가장 기본적이고 안전한 방식: defer 사용 -->
    <script src="script.js" defer></script>
</head>
<body>
    <h1>JavaScript 연동하기</h1>
    <p>script 태그의 위치와 속성을 알아봅니다.</p>

    <!-- 2. 과거의 방식: body 태그 끝나기 직전에 삽입 -->
    <script>
        console.log("body 끝에서 실행됩니다.");
    </script>
</body>
</html>

실행 결과