모던 웹브라우저에서 스크립트들은 대부분 html보다 무겁다
즉, 용량이 커서 다운받는데 오래걸림
브라우저는 html 읽다가 스크립트 만나면 스크립트를 먼저 실행해야 함
그래서 DOM 생성을 멈춤
이런 브라우저 동작 방식은 2가지 이슈를 만듬
1. 스크립트에서는 스크립트 아래에 있는 DOM 요소를 접근 못함
즉, DOM 요소에 핸들러를 추가하는 것이 불가능
버튼을 동작시키는 스크립트를 상단에 작성하고 아래쪽 코드에 버튼이 있다면 동작 안함
2. 스크립트 용량이 크면 스크립트를 다운받을 때까지 아래 코드는 실행 X
해결법
1. 스크립트를 페이지 아래에 적기 (<body> 안에서 제일 밑에 적기)
하지만, 이건 완벽한 해결책이 아님
- html 문서 자체가 아주 크면 html 문서 자체를 다운로드하고 스크립트를 다운받게 하면 페이지가 느려진다. (스크립트를 밑에 작성했는데 html 문서 자체가 너무 크면 스크립트를 읽으러 갈때까지 시간이 오래걸림)
이렇게 되면 js 의존성이 큰 페이지는 동작하지 않는 깡통 페이지가 되어 사용자가 불편해함
2. defer 속성 사용
- 스크립트에 defer 속성을 추가하면 백그라운드에서 다운로드
- 그래서 html 파싱을 멈추지 않고 스크립트를 다운로드
- 스크립트 실행은 html을 다 읽을때까지 지연
- 문서에 추가된 순으로 스크립트가 실행
3. async 속성 사용
- 스크립트에 async 속성을 추가하면 페이지와 독립적으로 동작
- defer처럼 백그라운드에서 다운
- html 문서가 다운로드 끝날때까지 기다리지 않고 스크립트 다운로드 함 (스크립트 실행할때는 html 파싱 멈춤)
- async 속성을 가진 스크립트가 페이지에 여러 개 있다면 실행 순서는 다운로드 끝난 순으로 진행
공통점
async와 defer 스크립트는 다운로드 시 페이지 렌더링을 막지 않는다
언제 뭘 사용하지?
- 스크립트에 의존적이라면
defer를 사용하고 그렇지 않다면async를 사용 - 안전성을 높이고 싶다면
defer - html 크기가 작다면
<body>맨 밑에 적기
출처
https://ko.javascript.info/script-async-defer
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
인간은 적응의 동물