HTML에 자바스크립트 적용 방법

작동원리

HTML이 파싱 중에 script 태그를 만나면 파싱을 일시적으로 멈추고 script를 로드한다.

script의 위치 및 설정에 따라 파싱진행 과정이 달라지게 된다.

 

*파싱 : 브라우저가 코드를 이해하고 사용할 수 있도록 DOM tree구조로 변환시키는 것

 

 

[위치에 따른 분류]

설정이 없는 상태를 전제한다.

 

• 맨위

자바스크립트의 패치와 실행이 된 후 html 파싱이 진행되기 때문에 비교적 느리다.

 

• 맨아래

HTML 파싱이 완료된 이후에 자바스크립의 패칭과 실행이 된다. 다만 HTML이 로드 되었지만 자바스크립트가 아직 로드가 되지 않은 경우 브라우저의 화면구현은 완료되었지만 JavaScript기능은 작동하지 않는다.

 

 

[설정에 따른 분류] 

script 태그의 속성에 추가하여 사용

위치에 상관없다.

 

• async

HTML의 파싱과 JavaScript의 패칭이 병렬적으로 이루어 진다. 패칭이 완료되면 즉시 JavaScript가 실행되어 HTML의 파싱이 멈추게 된다.

 

• defer

async와 동일하게 HTML의 파싱과 JavaScript의 패칭이 병렬적으로 이루어진다. 다만 패칭으로 그치고 실행은 HTML의 파싱이 완료 된 이후에 진행되어 중간에 끊기지 않는다.