'script' 태그
'웹 브라우저'에서 수행하는 'HTML 파싱(parsing)' 작업은 내부적으로 HTML 문서 데이터를 다운로드 받아 읽어서 DOM 트리 객체를 구성하는 것을 말한다. div, p, span, table 등의 태그를 만나면 DOM 트리 객체에 각 태그에 대응되는 노드 객체를 추가한다고 생각할 수 있다. HTML 데이터의 내용은 굉장히 길거나 복잡하게 작성될 수도 있기 때문에 HTML 파싱 작업은 꽤 시간이 걸릴 수 있다. img 태그처럼 HTML 파싱 작업을 멈추고 다른 리소스를 참조 작업을 수행하는 태그가 있다. script 태그도 그 중 하나이다.
HTML 파싱 중에 script 태그를 만나면 HTML 파싱을 멈추고 스크립트를 다운로드한 후 실행한다. 스크립트가 실행되는 동안에는 HTML 파싱이 멈춘 상태이다. 스크립트가 실행되고 나면 HTML 파싱을 다시 시작한다. 즉 다음에 설명하는 defer 속성과 async 속성을 명시적으로 지정하지 않을 경우에 async 속성이 적용된 것처럼 동작한다.
'defer' 속성
defer 속성은 스크립트를 실행을 미루는 속성이다. defer 속성을 사용하면 HTML 파싱이 끝난 후에 스크립트를 실행한다. defer 속성은 스크립트가 여러 개 있을 때 순서를 보장한다. defer 속성은 async 속성과 함께 사용할 수 없다.
경우에 따라서는 body 태그의 onload 이벤트에서 실행하던 스크립트를 defer 속성을 사용하여 head 태그에 두는 것이 좋다. onload 이벤트는 페이지에서 사용하는 '이미지' 등의 모든 리소스가 다운로드된 후에 실행되기 때문에 스크립트가 실행되기까지 시간이 걸린다. defer 속성을 사용하면 아직 모든 리소스가 다운로드되지 않은 HTML 파싱이 끝난 시점에 스크립트를 실행하기 때문에 onload 이벤트에서 스크립트를 실행했던 것보다 실행 시간이 단축될 수 있다.
'async' 속성
async 속성은 스크립트를 비동기적으로 실행하는 속성이다. async 속성을 사용하면 HTML 파싱을 멈추고 스크립트를 다운로드한 후 실행한다. async 속성은 스크립트가 여러 개 있을 때 순서를 보장하지 않는다. async 속성은 defer 속성과 함께 사용할 수 없다.