사용자가 HTML 파일을 다운 받았을 때, 브라우저
렌더링 엔진은 한 줄씩 순차적으로 파싱하면서 DOM을 생성해 나가다가 script 태그를 만나면 DOM 생성을 일시 중단한다.
script 태그 내의 자바스크립트 코드를 파싱하기 위해 Node.js의 V8과 같은 자바스크립트 엔진이 파싱과 실행을 하게된다.
추가 내용
자바스크립트 엔진은 코드를 파싱하여 CPU가 이해할 수 있는 low level language로 변환하고 실행한다.
렌더링 엔진 ->
자바스크립트 엔진이 제어권을 넘겨 받고 JS 코드를 파싱하기 시작한다. ->
자바스크립트 엔진은 JS코드를 해석한다. ->
AST 추상적 구문 트리 라는 것을 생성한다. ->
이것을 기반으로 인터프리터가 실행할 수있는 중간코드인 바이트코드를 생성해서 실행한다.
모든 자바스크립트 파일을 브라우저에서 한번에 로딩할 때의 문제점
브라우저는 동기적으로 HTML, CSS JS를 파싱하고 실행한다. <script> 태그 위치에 따라 HTML 파싱이 blocking 되어 DOM 생성이 지연될 수 있다.
<script> 태그를 <head> 태그나 <body> 안에 추가할 수 있는데, <head> 에 위치시키는 것은 좋은 방법이 아니다.
<script> 태그를 <head> 태그에 넣지 말아야 하는 이유
- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러가 발생할 수 있다.
- blocking되는 시간이 길어져 사용자가 페이지를 보기까지 대기 시간이 길어져서 좋지 않은 유저 경험을 제공할 수 있다.
<script> 태그를 <body> 요소의 가장 아래에 위치 시키는 것이 바람직하다.
- HTML 태그들을 먼저 출력하고 마지막에 script 태그를 출력하면 자바스크립트가 실행되기 이전에 DOM 생성이 완료되어 렌더링 되기 때문에 페이지 로딩 시간이 단축된다.
- DOM 완성되기 전 JS를 조작 해 DOM 에러가 나는 일도 없다.
async / defer 어트리뷰트
- 자바스크립트 파싱에 의한 DOM 생성이 중단되는 문제를 해결하기 위해 HTML5에서 async / await이 추가되었다.
- src 어트리뷰트로 외부 JS 파일을 로딩할 경우에만 사용 가능하다. (인라인 JS에서는 사용 불가)
- 비동기적으로 파싱된다.
async
HTML 파싱과 JS 파일 로드가 비동기적으로 동시에 진행된다.
JS 파일 로드는 HTML이 파싱되는 동안에도 진행하지만, JS 실행은 HTML이 파싱된 이후에 실행되고, 이때는 HTML 파싱이 중단된다.
defer ✨
async 어트리뷰트와 같이 HTML 파싱을 하다가 script 태그를 만나면 JS 로드를 하지만, JS 실행은 HTML 파싱이 모두 완료된 후 (DOM 생성이 완료된 직후)에 진행된다.
참고
자바스크립트 Deep Dive
