개발을 배우다 보면 ‘동기’와 ‘비동기’라는 말을 한 번쯤은 들어봤을 것이다. 오늘 수업에서 이 내용을 배웠기 때문에, 배운 내용을 나만의 방식으로 다시 설명해보려 한다.

동기 방식

우선, 아래와 같은 HTML 마크업과 4개의 스크립트가 있다고 가정해보자.
(자바스크립트 코드의 경우, 변수로 선언한 버튼만 다르고 코드가 반복되어 스크립트 하나만 첨부함.)

• html 마크업 내에 body 태그 안 가장 아래에 버튼 4개가 있고,
• 4개의 버튼에 이벤트를 추가하는 함수가 등록된 스크립트는 head태그 안에 각각 차례대로 존재한다.
• 동기 방식의 경우 직렬로 위에서 아래로 차례대로 파싱을 하는게 원칙이다.
  
• 그렇기 때문에, 위에서 아래로 차례대로 파싱을 하다가 script 태그를 만나면 HTML 파싱을 멈추고, 스크립트 로드(Script fetch)와 스크립트 실행(Script Execution)을 진행한다.
• 스크립트 실행이 진행되는 때에 스크립트 코드 안에서 변수로 선언한 버튼 요소가 파싱되지 않은 시점이기 때문에 타입에러가 발생하게 된다.
  
• 만일 스크립트 코드 내에 문제가 없어서 에러가 발생하지 않았다고 가정한다면, 스크립트 로드와 실행이 끝난 이후 HTML 파싱을 재개하게 된다.

비동기 방식

• 동기 방식과는 달리 비동기 방식은 HTML파싱과 스크립트 로드를 병렬로(동시에) 진행한다.
• 단, 스크립트 실행 방식에 따라 두 경우로 나눌 수 있는데, async와 defer가 그러하다.
• 두 경우 모두 외부 스크립트(src 속성으로 적용한 경우)에만 적용 가능하다.
  

async(스크립트 즉시 실행)

• async의 경우 스크립트 로드는 HTML과 동시에 진행하지만, 스크립트 로드가 끝나면 HTML 파싱을 멈추고, 스크립트 실행을 진행한다.
• 그렇기 때문에 async를 스크립트에 적용할 경우 HTML 파싱이 끝나기 전에 스크립트가 먼저 실행이 될 가능성이 있다.
• 또한, 스크립트간 실행 순서가 보장되지 않는다.
• 그렇기 때문에, async는 방문자 수 카운트, 접속 통계 기록 등과 같이 페이지 내의 스크립트와 독립적인 기능 사용시 주로 사용한다.

defer(스크립트 지연 실행)

• 반면에 defer는 스크립트 로드를 끝마치더라도 HTML 파싱이 모두 끝날 때 까지 기다렸다가 스크립트를 실행한다.
• 또한, defer 속성을 적용한 스크립트가 여러 개 있을 경우, 작성 순서대로 순차 실행한다.
• 그렇기 때문에 페이지 렌더링이 우선시 되는 경우에 주로 사용한다.
• 또한, type="module" 속성이 있으면 기본적으로 defer 속성으로 동작하게 된다.

이상 오늘 배운 내용을 정리해 보았습니다. 읽는 분들께 도움 되시길!