JavaScript 관련 글입니다.

• JS Event Loop, 자바스크립트 동작 원리
• 호이스팅이란 , var, let, const 차이
• Three.js에 대해
• script, script async, script defer의 차이
• AJAX가 무엇일까?
• 함수선언식과 함수표현식
• null과 undefined의 차이 간단정리
• setTimeout과 setInterval 요약
• this의 여러가지 의미
• Spread Operator(...)?
• JS class Constructor
• ES6 Destructuring Syntax
• default 파라미터 알아보기
• import / export 를 사용한 모듈식 개발방법
• Optional Chaining (?.)
• 프로미스(Promise)에 대해서
• ES8 - async / await
• Symbol 자료형?
• forEach, for in, for of 알아보기
• JSON형식 변환 방법 - JSON.parse(), JSON.stringify()
• 자바스크립트 가비지 컬렉션
• 화살표 함수와 일반함수의 차이
• JavaScript Array.reduce() 간단히 알아보기

오늘은 script 태그에 대해서 알아보겠습니다. script태그는 자바스크립트를 정의할 때 사용합니다. 문서파일에 자바스크립트를 추가하는 방법이 3가지가 있는데, 각각 특징이 다릅니다. 이것에 대해서 정리해 보도록 하겠습니다.

script, script async, script defer 의 차이

1. script
   그냥 일반적인 방법입니다. HTML을 파싱하는 중에 이 script태그를 만나면 HTML파싱을 중지하고 스크립트를 다운받아 파싱하고 실행합니다. 이것이 완료되면 다시 HTML을 파싱합니다.

2. script async
   async 속성이 붙은 경우입니다. 이것은 HTML파싱을 하면서 script태그를 만나면 문서를 파싱하면서 스크립트를 다운받습니다. 다운이 완료되는 즉시 HTML 파싱을 멈추고 스크립트를 실행합니다. 실행이 끝나면 남은 HTML 문서를 분석합니다.

3. script defer
   defer 속성이 붙은 경우는 async 처럼 script태그를 만났을 때 스크립트를 다운받는데, HTML파싱이 모두 완료되면 받아놓은 자바스크립트를 실행하게 됩니다. HTML을 파싱하는 동안 필요한 자바스크립트파일을 받아놓고 HTML을 모두 파싱해서 사용자에게 페이지를 먼저 보여준 후 바로 이어서 자바스크립트를 실행합니다.

정리

• script 태그 : HTML 파싱중에 script 태그 만남 -> HTML파싱을 중지하고 스크립트 다운,파싱,실행 -> 끝나면 다시 HTML파싱
• script async 태그 : HTML 파싱중에 script 태그 만남 -> 아직 HTML 파싱을 중지시키지 않고 스크립트 다운 -> 다운완료되면 그때서야 HTML파싱 중지 후 스크립트 실행 -> 끝나면 다시 HTML파싱
• script defer 태그 : HTML 파싱중에 script 태그 만남 -> HTML파싱을 중지시키지 않고 스크립트를 다운받음 -> 다운완료되어도 HTML파싱을 모두 완료한 후에야 스크립트를 실행함.

End.