결론적으로 async, defer script는 페이지 렌더링을 막지 않기 때문에 사용자가 기다리지 않고 페이지를 볼 수 있다!
html 문서에서
script 태그를 head 태그에 넣어두면 브라우저는 위에서 부터 순서대로 코드를 읽기 때문에
script 태그를 빨리 만난다. 그러나 script 태그 안에 파일의 용량이 엄청 크면 HTML를 다 읽기도 전이라 DOM 생성을 멈춘다.
body 태그 가장 밑에 script 태그를 두면 네트워크가 빠른 우리나라 같은 곳은 상관이 없겠지만
HTML 문서 전체를 다 다운받고 script 파일을 실행하므로 속도가 느려질 단점이 있다.
그래서 script 태그에 defer 속성을 사용하면 위의 단점을 보완할 수 있다. 브라우저는 defer 속성이 있는 script를 background에서 다운로드한다. 따라서 HTML parsing을 멈추지 않고 병렬적으로 다운로드가 가능하다. defer script는 페이지 생성을 막지 않습니다. 또한, 특징은 일반HTML 순서대로 실행됩니다. 병렬적으로 다운로드 되어 용량이 작은 script가 먼저 다운되지만 실행은 순서대로 진행합니다.
반면에 async script는 다운이 진행되는 동안 HTML 문서의 다운로드가 멈춥니다. 독립적으로 동작하기 때문입니다. 독립적으로 사용되기 때문에 async script는 다른 파일들을 기다리지 않습니다. 페이지 로딩을 막지 않기 때문에 페이지를 바로 출력합니다.
Frontend Developer