script태그 defer, async
- 처음 웹 프로그래밍을 배울 때 스크립트 태그는 body 최하단에 위치시키라고 배웠다
- 스크립트 로드 타이밍을 뒤로 미뤄서 돔을 조작하는 스크립트가 잘 동작한다
- 근데 요즘에는 스크립트 태그를 head 안에 선언하는 경우가 많다
- defer를 사용하면 위에서 말한 효과를 볼 수 있다
- 근데 defer 말고도 async라는 속성을 줄 수 있다
- 둘이 차이는 뭘까?
default (blocking further parsing)
- 스크립트 태그를 만나면 파싱을 멈추고 스크립트를 로드하고 실행한다
- 이 때 HTML 파싱을 멈춘다
- 스크립트가 로드 다 끝나면 이어서 남은 파싱을 진행한다
- 스크립트가 헤비 하면 화면이 안 그려지고 사용자가 떠날 확률도 높아지겠다
defer, async 공통
- 스크립트는 스크립트대로 로드하고 HTML 파싱은 계속된다
- 비동기적이다
defer
- 스크립트 로드가 완료되었다고 바로 실행되지 않는다
- HTML 파싱이 모두 끝나면 실행된다
- 주로 돔을 조작하는 스크립트를 로드할 때 사용하면 된다
async
- 스크립트가 로드되고 바로 실행된다
- 돔을 조작하는 스크립트가 없을 때 사용하는 것이 좋다
참고
script태그 defer, async