.png)
<script>
- html 파싱과 스크립트의 다운, 실행이 html 문서에 추가된 순서대로 우선 진행된다.
<head> 안에 스크립트를 넣는 경우
중간에 html 파싱을 멈추고 스크립트를 처리하기 때문에 스크립트에서 dom을 제어하는 코드가 있을 경우 문제가 된다.
</body> 바로 위에 스크립트를 넣는 경우
html 파싱이 중간에 멈추는 문제는 해결할 수 있지만 스크립트가 실행되기까지 시간이 오래 걸린다. 자바스크립트에 의존적인 (동적요소가 많거나 등등) 웹사이트의 경우 문제가 된다.
<script async>
-
스크립트를 만나도 html 파싱을 멈추지 않고 스크립트를 다운로드한다.
스크립트가 준비됐을 때 html 파싱이 완료되지 않았다면, html 파싱을 멈추고 스크립트를 우선 실행한다. -
복수의 스크립트 파일을 다운로드 하는 경우, 스크립트는 모두 독릭적으로 다운로드되고, 다운로드가 완료된 순서로 실행이 진행된다. 그렇기 때문에 스크립트 실행 순서가 일정하지 않다.
-
async속성을 사용하는 경우 스크립트가 다운로드 되는 시간을 줄일 수 있지만 자바스크립트가 DOM을 제어하는 경우 여전히 문제가 될 수 있으며 스크립트의 순서에 의존적인 페이지의 경우 역시 문제가 된다.
<script defer>
-
async와 마찬가지로 html 파싱과 스크립트 다운로드가 병렬적으로 이루어진다.
하지만 스크립트가 준비되더라도 html 파싱이 완료할 때까지 실행을 하지 않고 기다린다. -
복수의 스크립트 파일을 다운로드하는 경우, html 파일에 추가된 순서대로 실행이 진행된다.
-
html 파싱을 중간에 멈추지 않고 스크립트 실행 순서가 일정하기 때문에 가장 안전적인 방법이라고 할 수 있다. 하지만 순서대로 스크립트가 실행되기 때문에 길이가 긴 스크립트가 위에 있다면 긴 스크립트가 실행된 후에 짧은 스크립트가 실행된다.
정리
-
defer를 사용할 경우 사용자는 스크립트가 실행되지 않은, 그래픽 관련 컴포넌트들이 준비되지 않은 상태에서 화면을 보게 될 수 있다는 점에 유의해야 한다.
관련 버튼을 사용 불가(disabled) 처리를 해주는 등 사용자에게 현재 어떤 것을 사용할 수 있고, 어떤 것은 사용할 수 없는지 알려주어야 한다. -
DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에는
defer를, 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트 혹은 실행 순서가 중요하지 않은 경우에는async를 적용한다.
