[Javascript] Async와 defer 차이 (스크립트를 파싱하는 방법)
async와 defer의 차이점을 까먹어서 다시 공부해서 정리해야겠다고 생각했는데 마침 유튜브에서 보는 개발자분이 설명한 영상이 있어서 참고했다.
동영상: www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
여기에 잘 설명된 글이 있어서 해당 글을 참고했다.
blog.asamaru.net/2017/05/04/script-async-defer/
브라우저가 파일을 파싱하는 순서
1. html 파일 파싱
2. css 파일 파싱
3. 중간에 javascript파일 만나면 javascript 파싱
모르는 개념이라면 아래글을 참고
2020/09/17 - [FE면접준비] - 브라우저 렌더링 과정
웹 브라우저는 파일을 파싱할 때 순차적으로 파싱하는 동기적인 실행을 하기 때문에
중간에 다른 파일이 파싱될 때까지 기다려야하기 때문에 성능 상 문제가 생길수도 있고 사용자 경험도 저하될 수 있다
문제점
DOM에 접근하여 어떤 동작이나 예쁜 화면을 보여주는데 파일이 준비되지 않을 수도 있다.
혹은 클릭 버튼이나 기타 동작이 화면에 보이나 실행이 되지 않는 경우도 있다
일반적으로 파일을 파싱해서 실행하는 순서
아래 그림을 보면
1. HTML 파일을 파싱하다가 스크립트 파일을 만나면 HTML 파싱을 멈춘다.
2. SCRIPT파일을 파일을 파싱하고 파싱이 완료되면 실행한다. 이 동안에 HTML파싱은 중지되어 기다리고 있다.
3. SCRIPT파일 실행이 끝나면 HTML파일을 파싱을 완료한다.
이렇게 실행하다 보면 스크립트 파일이 파싱되고 실행될 때까지 HTML파일의 파싱을 기다리게 된다.
문제는 중간에 html이 파싱되는 것이 지연되고 script동작이 실행될 때 필요한 html이 준비되지 않은 경우가 있다.
그래서 사람들이 많이 사용하는 방법이 html 태그를 닫기 바로 전에 script파일을 두는 것이다
<html>
blah
blah~~
// 이런식으로 둔다
<scirpt src="a.js"></script>
</html>이런 방식을 사용하면 html파싱이 모두 끝난 후 js가 동작하는 것을 보장해준다.
하지만 사용자가 의미있는 컨텐츠(script로 좋은 성능, 동작을 하게 구현한 것)을 기다리기까지 많은 시간을 기다려야
할 것이고 이는 사용자 경험을 떨어뜨리고 사용자 이탈을 유발하게 된다.
Async 속성
boolean 속성이라 그냥 쓰는 것으로 true가 된다
<script async src="a.js">
비동기적으로 파일을 파싱해서 html파싱과 script파싱이 동시에 이루어진다.
다만 script파일의 파싱이 끝나는 시점에서 바로 실행을 시킨다.
문제점은 script파일을 여러 개를 불러왔을 때 파싱이 먼저 끝난 script파일을 먼저 실행시킨다는 것이다.
만약 a.js파일에서 실행될 때 b.js파일의 변수, 함수가 필요한데 b파일이 아직 파싱되지 않았다면 문제가 생길 수 있다.
즉, 순차적으로 파일이 실행될 필요가 있을 때 그 순서를 보장해주지 않는다.
Defer 속성
async와 마찬가지로 boolean 속성이라 써주기만 하면 된다.
<script defer src="a.js">
Async 속성처럼 비동기적으로 html파일과 동시에 파싱이 되지만 파일이 모두 파싱되더라도 실행시키지 않고
html파일이 파싱될 때까지 기다린 후 실행한다.
또 파일이 순차적으로 실행되게 된다.
가장 많이 추천하는 속성인 것 같다. 하지만 순차적인 실행이 필요하지 않은 경우 async 속성이 유용하다.
script태그를 html 닫힘태그 바로 앞에 넣는 경우 async, defer 속성이 유효하지 않아 보통 시작하는 태그 전에 사용한다
<html>
// 이런식으로 둔다
<scirpt src="a.js" async></script>
blah
blah~~
</html>
async 속성과 defer 속성을 동시에 사용하면 async 속성이 지원되는 브라우저의 경우 async 속성이 우선적으로 적용
되고 다음으로 defer 속성이 적용된다. 다만 대부분의 브라우저에서 지원된다.
'FE 공부' 카테고리의 다른 글
| focusout 과 blur 의 차이 (0) | 2021.05.15 |
|---|---|
| HTTP VS HTTPS (0) | 2021.01.29 |
| [FE면접준비] HTTP 총 정리 및 특징, HTTP1.1 VS HTTP2.0 (0) | 2021.01.05 |
| 이벤트 루프 (Event Loop) (0) | 2020.12.04 |
| 브라우저 렌더링 과정 (0) | 2020.09.17 |