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

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

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

렌더링 차단

기본 <script>

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

비동기 다운로드

async 속성

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

최신 웹 표준

defer 속성

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

⚠️ 주의: 스크립트 에러 방지

과거에는 <body> 끝에 스크립트를 넣었지만, 최신 개발 환경에서는 <head> 태그 내부에 defer 속성을 사용하여 로드하는 것이 가장 추천되는 방식(Best Practice)입니다.

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JS 로딩 전략</title>  <script src="script.js" defer></script> </head> <body> <h1>JavaScript 연동하기</h1> <p>script 태그의 위치와 속성을 알아봅니다.</p>  <script> console.log("HTML 요소가 모두 그려진 후(body 끝에서) 실행됩니다."); </script> </body> </html>