🔍 HTML에 JavaScript 적용하기
👀 script 요소 삽입 위치 비교
HTML에 JavaScript를 적용하기 위해서는 <script>태그를 이용해 js파일을 불러오는데, 웹 브라우저가 코드를 해석하는 과정에서 <script> 요소를 만나면, 해석을 잠시 멈추고 <script>요소를 먼저 실행한다. 즉, <script>요소는 등장과 함께 실행된다.
<script> 요소를 추가하는 대표적인 2가지 사례로, 아래와 같이 나눌 수 있다.
✔ <script> 요소를 <head> 안쪽에 삽입하는 경우
HTML 파싱이 완료되기전에 script 파일을 실행시킨다
js 파일이 크고 무거우면 렌더링이 오래걸리기 때문에 사용자가 완성된 페이지를 보기까지 상대적으로 오래걸린다.
따라서, 일반적으로 <body>요소가 끝나기 전에 삽입하게 된다.
✔ <body> 요소가 끝나기 전에 삽입하는 경우
HTML 파싱 완료 후 script파일을 실행시킨다.
렌더링 부분에서 효율적이다. 그러나 js 파일이 크고 무거우면 사용자가 의미 있는 콘텐츠를 보기 위한 시간이 상대적으로 오래걸린다.
위의 단점들을 개선하기 위해 HTML5에 새로 추가된 <script> 속성 async나 defer를 <head> 내부의 <script>요소와 함께 사용할 수 있다.
✔ async
<head> 안쪽에 <script async src = 'script.js'></script> 의 형태로 사용한다.
HTML 파싱 중, <script> 요소를 만나면 HTML 파싱과 함께 script를 다운받는다. 이후, script실행시 HTML 파싱을 중단한다.
asnync의 사용은 병렬적으로 진행하기 때문에 시간이 절약된다는 장점이 있다. 그러나, 다수의 js 파일을 다운받을 때, 다운로드가 완료된 순서로 파일을 실행하기때문에 순서에 상관없이 실행된다. 따라서, 순서가 중요한 경우 문제가 발생한다.
✔ defer
<head> 안쪽에 <script defer src = 'script.js'></script> 의 형태로 사용한다.
async와 마찬가지로, HTML 파싱 중 <script> 요소를 만나면 HTML 파싱한다. 이후 HTML 파싱이 종료된다면 script을 실행한다.
defer의 사용은 asnyc와 마찬가지로 병렬적으로 진행하기 때문에 시간이 절약되며, HTML 파싱과 script 파일 다운이 모두 완료된 후에 순서대로 실행되기 때문에 anync의 한계를 보완할 수 있다.
Reference: 코드스테이츠
