맨 땅에 프론트엔드 개발자 되기

코딩독학) script 태그, async와 defer 본문

코딩 공부 일지/JavaScript

코딩독학) script 태그, async와 defer

헬로코딩 2022. 2. 7. 16:02
728x90

async와 defer

 

Parsing 이란?

영단어 ‘Parse’ 의 뜻은 ‘문장을 문법적으로 분석하다.’ 라는 뜻으로 프로그래밍의 개념에서는 브라우저가 html, css, javascript 같은 프로그래밍 언어를 읽고 해석하여 결과물을 도출하는 과정을 의미한다. 브라우저는 보통 언어를 위에서부터 아래로 차례대로 읽어 내려가 해석하고 결과를 도출한다. 여기서 차례대로 가 중요한데, 동시에 html문서, js문서를 읽어내려가는 것이 아니기 때문에 어떤 기능이 실행되는 시점에 그 기능과 연관된 개념이 파싱되어 있지 않으면 제대로 작동하지 못하고, 이를 에러라고 부른다.

 

async와 defer

html 문서에서 스크립트가 실행될 때 <script> 태그의 위치가 굉장히 중요하다. 자바스크립트는 html의 요소(DOM)를 동적으로 처리하는 언어이기 때문에 (예를 들어, 버튼을 클릭했을 때 다른 요소를 보여줌 - 클릭 이벤트) 해당 요소가 <script> 태그가 읽힌 뒤에 있다면 <script> 태그가 실행될 때 조작할 요소가 없기 때문에 에러가 일어나게 된다.

보통 js 파일을 html 문서에 연결할 때 해당 html 문서의 정보를 선언하는 공간인 <head> 태그 영역에 <script> 태그를 이용하여 선언하게 된다. 이렇게 <script> 태그를 연결하면 querySelector나 getElementByID 같은 메소드로 html 요소를 조작할 때 에러가 난다. 왜냐하면, 내가 조작하려는 html 요소는 <script> 태그가 읽히고 난 뒤 <body> 태그 영역을 읽을 때 위치해 있기 때문이다. <script> 태그를 읽을 시점에는 요소가 없기 때문에 무엇을 조작하는 것인지 컴퓨터가 인지하지 못한다.

 

이를 해결하기 위해 async와 defer 속성을 <script> 태그에 추가해줄 수 있다. 그렇다면, 이 둘의 차이점을 알아보자.

 

 

- async

 

async는 병렬로 js파일을 다운받은 뒤 js파일을 읽어 들어가는 방식이다. async가 선언된 <script> 태그를 만나면 컴퓨터는 js파일을 다운받음과 동시에 밑에 있는 html 내용을 파싱하고 js파일이 다 다운 받아지면 js파일을 실행하고 다시 남은 html 내용을 파싱한다. 이렇게 되면 html 내용도 빠르게 표시가 되고, 스크립트의 내용도 동시에 읽는다는 장점이 있으나, js파일을 실행할 때 조작할 요소의 html 내용을 읽었는지 알 수가 없다. 그래서 에러가 일어날 수도 있다는 단점이 있다.

 

- defer

 

defer는 async와 비슷하게 <script> 태그를 만나면 js파일을 다운받고 동시에 밑에 있는 html 내용을 파싱한다. 그러나 js파일이 실행되는 시점이 다 다운받은 즉시 실행되는 것이 아니라 html의 파싱이 완료된 후이기 때문에 에러가 나지 않고 안전하다. 그래서 주로 defer 방법으로 <script> 태그를 선언하지만, 때때로 필요에 따라 빠르게 먼저 js파일을 실행시켜야 하는 경우도 있기 때문에 async 방법이 필요할 때도 있다.

 

 

 

 

 

이 글은 드림코딩 by 엘리 님의 유튜브 영상을 공부한 내용으로 작성되었습니다.

https://www.youtube.com/watch?v=tJieVCgGzhs&t=523 

 

728x90
저작자표시

'코딩 공부 일지 > JavaScript' 카테고리의 다른 글

호이스팅 (Hoisting)  (0) 2022.02.09
코딩독학) 배열 (Array) (+ 몇 가지 JavaScript 메소드)  (0) 2022.02.08
코딩독학) JavaScript 생성자 함수와 클래스 함수 (ES6)  (0) 2022.02.07
JS 예제) 반복문을 활용한 구구단 출력하기  (0) 2022.01.26
JS 예제) 바닐라 자바스크립트로 무한 루프 슬라이드 구현하기  (0) 2022.01.24
'코딩 공부 일지/JavaScript' Related Articles more