자바스크립트(JavaScript)란?
자바스크림트는 웹 브라우저에서 동작하는 프로그래밍 언어를 말한다.
HTML과 CSS로 만들어진 정적인 페이지에 동적인 기능을 추가해주는 역할을 한다.
❓ 자바스크립트는 언제 실행될까?
1. 브라우저가 페이지를 여는 순간
사용자가 URL을 입력하면 브라우저는 서버로부터 HTML 문서를 받아온다.
이때 브라우저는 HTML을 위에서 아래로 한 줄씩 읽기 시작하는데
2. HTML 파싱 중 JavaScript를 만나면?
HTML을 읽다가 <script> 태그를 만나면 아래와 같이 진행한다.
- HTML 파싱 일단 중단
- JavaScript 파일 다운로드
- JavaScript 실행
- 실행이 끝난 뒤 다시 HTML 파싱 재개
> 자바스크립트는 HTML 파싱을 멈추게 한다는 것이 핵심이다.
💡 <script> 태그는 어디에 위치해야할까?
자바스크립트는 실행되는 동안 HTML 피싱을 일시적으로 중단시킨다.
그래서 <script>를 어디에 배치하느냐에 따라 페이지 로딩 속도와 동작 방식에 영향을 줄 수 있다.
1. <head> 안에 위치하는 경우 : 권장하지 않음👎
<head>
<script src="script.js"></script>
</head>브라우저는 HTML을 읽다가 <script>태그를 만나면 피싱을 중단하고 자바스크립트 파일을 다운로드 한 뒤 실행한다.
이 과정이 끝날때까지 HTML 렌더링이 지연되기 때문에 스크립트 코드가 무겁거나 양이 많을 경우 사용자는 빈 화면을 오해 보는 경우가 발생할수도 있다.
그리고 만약 버튼을 클릭하면 효과를 주는 스크립트 코드를 <head>에 입력했을때로 가정해보면,
아직 버튼이 HTML에서 생성되기전에 자바스크립트가 먼저 실행된다면 버튼이 null이 되어 오류가 발생할수도 있다.
2. <body> 태그 맨 아래에 위치하는 경우 : 권장👍
<body>
<!-- HTML 콘텐츠 -->
<button id="btn">클릭</button>
<!-- body 마지막에 위치 -->
<script src="script.js"></script>
</body><body>태그 맨 아래에 위치할 경우 브라우저가 HTML을 끝까지 읽어 화면을 구성한 뒤 자바스크립트를 실행하게 된다.
그렇기 때문에 사용자가 화면을 빠르게 확인할 수 있고 요소를 찾기 못해 발생하는 오류를 줄일 수 있다.
'웹 개발' 카테고리의 다른 글
| [JavaScript] Node.js에서 .js와 .mjs 파일의 차이점 (0) | 2026.06.30 |
|---|---|
| [JavaScript] 정규식(Regex)에서 +는 언제 사용할까? (0) | 2026.06.22 |
| VSCode에서 바로 Github에 프로젝트 올리기 (0) | 2026.06.18 |
| [Git, Github] Git 설치, Git과 Github 설정 (0) | 2026.06.15 |
| HTML문서 기본 설정, 알아두면 좋은 단축키(VSCode사용) (0) | 2026.06.10 |