일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 백준 2503 typescript
- 백준 4796 nodejs
- 백준 1449 자바스크립트
- 백준 11047 javascript
- 백준 2503 javascript
- 백준 1449 javascript
- 백준 1449 노드
- 백준 1018 자바스크립트
- 백준 1018 타입스크립트
- 백준 4796 타입스크립트
- 백준 1018 javascript
- 백준 1018 nodejs
- CSS
- 백준 10448 javascript
- 백준 1449
- 알고리즘
- JavaScript
- 백준 4796 자바스크립트
- 백준 1449 타입스크립트
- 백준 1018 typescript
- 백준 4796 캠핑
- 백준 11047 타입스크립트
- 백준 1449 nodejs
- 백준 2503 타입스크립트
- 백준 11047 typescript
- 백준 2503 nodejs
- 백준 4796 javascript
- 백준 2503 자바스크립트
- 백준 11047 자바스크립트
- 백준 11047 nodejs
- Today
- Total
POTATO THAT WANT TO BE HUMAN
[JavaScript] script 태그 삽입 위치(head or body) 본문
script 태그는 head 안에 또는 body 안에 삽입될 수 있습니다.
두 개의 차이점은 무엇일까요?
차이점을 알아보기 전에 HTML 파싱에 대해 알아보겠습니다.
🤔 HTML 파싱
먼저 브라우저의 구성 요소에 대해 알아보겠습니다.
여기서 주목해야할 부분은 '렌더링 엔진' 입니다.
렌더링 엔진은 HTML, CSS를 파싱한 결과물로, 페이지를 화면에 표시합니다.
자바스크립트 코드는 자바스크립트 해석기에서 해석됩니다.
대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko 그리고 크롬, 오페라, edge의 Blink(webkit에서 파생됨)가 있습니다.
🔍 파싱이란?
파싱은 해당 언어의 문법 검사기라고 할 수 있습니다.
네트워크로 받은 HTML과 CSS 파일을 토큰화 시키고 Parse Tree를 생성합니다. 이 Parse Tree를 DOM 트리로 만들어 렌더하게 됩니다.
하지만 HTML을 화면에 보이기 위해 파싱하는 도중, 파싱을 멈추는 경우가 발생합니다.
1. head 내부에 작성된 script 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script src="app.js"></script>
<head>
<body>
</body>
</html>
script 태그의 파일은 두 가지 과정을 거쳐 실행됩니다.
1. 다운로드 (fetching)
2. 실행 (execution)
HTML은 파싱 도중, script 태그를 만나게 되면 중간에 파싱이 멈춥니다.
하향식으로 읽는 HTML 문서는, head 태그 내부에 불러온 script 태그를 읽느라 body 내부의 UI는 script 태그를 읽은 후에 사용자에게 보여주게 될 것입니다.
만약 script 파일이 너무 크고 무겁다면, HTML 파싱을 하다 만 화면을 사용자들에게 보여주게 될 것이며 이는 사용자 경험에 좋지 않은 영향을 미칠 것입니다.
또한 head내부 작성된 script태그는 HTML 파싱이 다 되기 전에 script 파일을 실행시키기 때문에
만약 script 파일이 DOM 요소를 조작한다면 존재하지 않는 DOM 요소에 접근하려는 시도로 예상치 못한 문제가 발생할 수 있습니다.
2. body 내부 마지막에 작성된 script 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<head>
<body>
<script src="app.js"></script>
</body>
</html>
이 방법은 HTML을 다운받고 파싱을 마친 후 script 태그를 읽기 때문에 페이지 콘텐츠를 1번의 방법보다 빠르게 볼 수 있습니다. 또 문서의 DOM 구조가 완료된 시점에서 실행되기 때문에 따로 추가설정을 할 필요가 없어집니다.
그러나 이 방법에도 단점이 존재합니다.
만약 이 웹을 사용하는데 있어서 사용자가 자바스크립트 없이 어떠한 활동도 할 수 없다면?
웹이 자바스크립트에 의존적이라면 HTML이 파싱이 다 되어도 의미가 없을 것입니다.
자바스크립트의 삽입 위치에 따라 스크립트 실행순서와 브라우저 렌더링에 영향을 미칩니다.
두 방법 중에서는 CSS, HTML 해석이 먼저 완료되고나서 JavaScript를 수행하는 것이 사용자입장에서 더 빠르게 느껴지기 때문에 HTML 문서의 마지막 (body 내부 마지막)에 두는 것이 권장됩니다.
참고한 멋진 블로그 .. 👍
'FRONTEND > JavaScript' 카테고리의 다른 글
[JavaScript] 이벤트 트리거 dispatchEvent() (0) | 2022.06.01 |
---|---|
[JavaScript] 변수와 호이스팅 (0) | 2022.05.24 |
[JavaScript] 배열 내 저장된 객체의 중복 제거 (0) | 2022.04.28 |
[JavaScript] array의 마지막 요소 찾기 (array last index) (0) | 2022.04.15 |
[JavaScript] localStorage 와 sessionStorage (0) | 2022.04.12 |