js파일을 html에 연동하기 위한<script> 태그는 어디에 위치하는 게 가장 좋을까? html의 문서를 보면 종종 head태그나 body밑에 위치한 script 태그를 볼 수 있다
보통 <script> 로 js를 연동하는 방법은 4가지가 있는데 어떤 방법이 더 적합한지 알아보자
📑 html 문서를 읽는 방식
- html 파싱Parsing
<script>줄을 만나면 html 파싱을 멈추고 js를 다운로드하고 실행- 스크립트를 마치고 html 파싱 재시작
파싱 Parsing 이란?
구문 분석이라고 해석하며, 문장이 이루고 있는 구성 성분을 분해하고 그 성분의 위계 관계를 분석하여 구조를 결정하는 것
웹상에서는 데이터를 분해하고 분석하여 원하는 형태로 가공하여 사용하는 것을 말한다
📍 <script> 태그 위치
head 태그 안
시중의 자바스크립트나 html 입문서를 보면 대부분 <script>가<head>안에 위치하는 것을 볼 수 있다
html 파싱 > js 다운 및 실행 >
<scrtip>이후 작성된 html 파싱 재시작
- 무겁거나 많은 스크립트를 처리할 경우 웹사이트 로딩이 늦어지게 됨
- js로 html 요소를 조작하려 할 때 Dom 트리가 다 만들어지기 전에 js가 먼저 실행되어 html 요소를 인식하지 못하는 오류가 종종 발생할 수 있다
body 태그 최하단
가장 많이 사용하는 방법이자 가장 추천하는 방법이다
전체 html 파싱 > js 다운 및 실행
- Dom 트리가 완성된 후 js로 html 요소를 제어할 수 있다
- html 파싱이 먼저 이루어지기 때문에 웹 화면을 빨리 볼 수 있다
🎈 <script> 태그 속성
async와 defer 속성을 활용하여 스크립트 로딩 순서를 제어
defer
defer 속성을 가진 스크립트는 html을 파싱하다가
<script defer>를 만났을 때 다운로드를 시작하지만, html 파싱을 멈추지 않고 html 태그가 닫혔을때 실행한다
<body>태그의 맨 마지막 줄에 작성하는 것과 같이 스크립트가 DOM을 조작하는 내용을 포함할 때 적합한 방식
async
async 속성을 가진 스크립트는 html 파싱 중 해당 요소를 만났을 때 스크립트 다운로드를 시작하며, defer와 마찬가지로 다운로드 중에 HTML 파싱을 멈추지 않지만 다운로드가 완료되면 즉시 실행한다. 실행하는 동안은 HTML 파싱을 멈추게 된다.
async속성은 DOM을 조작하지 않으며 앞뒤에 로드되고 실행될 스크립트와 의존성이 없는 코드만 포함
