[JavaScript] asyn defer 차이 - 자바스크립트 코드 HTML 에 불러오기
객체 기반의 언어 Javascript 를 사용하고
웹프로그래밍을 할 때 HTML은 코드를 한줄 한줄 읽어들이게 되는데요
HTML 로 자바스크립트를 불러올 때 여러 방법으로 코드를 가져올 수가 있어요
그 중 오늘은 asyn, defer 를 통해서 코드를 가져오는 방법이 어떻게 다른지에 대해서 알아볼게요
예전에는 이런 기능들이 없었기 때문에 HTML 사이트를 열려고 하면 그 안에 있는 script 코드까지 모두 다운로드가 다 된 이후에 페이지가 로드 됐었어요
페이지는 스크립트 다운로드가 끝나지 않아도 동작해야 이용자의 답답함을 줄일 수 있습니다.
asyn
async는 비동기 스크립트입니다.
페이지와 완전히 독립적으로 동작해요
HTML을 파싱(리딩)하는 도중 asyn을 보면 거기 있는 js 파일을 다운로드하고
다시 HTML 코드 리딩을 해나가다가 js 파일이 다운로드가 완료되면 리딩을 멈추고 js 코드를 불러옵니다.
defer
HTML을 파싱하는 동안 js 파일이 보이면 병렬로 다운로드를 합니다.
그런데 HTML 파싱을 마치기 전까지는 js파일이 다운로드 되었더라도 HTML 파싱이 완료 될 때까지 기다렸다가 실행됩니다.
만약 둘다 동시에 사용하게 된다면
최신 브라우저에서는 기본적으로 asyn 속성을 따라가지만
asyn 속성을 지원하지 않는 구형 브라우저는 defer 속성 지원 여부에 따라 결정됩니다.
현재 추세는 스크립트를 <head> 태그에 넣고 async 또는 defer 속성을 사용하는 겁니다.
이렇게 하면 브라우저 띄우는 지연을 두지 않고 스크립트도 최대한 빨리 다운 받을 수 있습니다.
일반 <script> 태그만 사용하려면 </body> 태그를 닫기 전 맨 아래에 삽입해야 합니다.
script를 만날 때마다 파싱을 중지하고 스크립트를 로드하고 실행하게 됩니다.
이 과정에서 네트워크 왕복 시간, 자바스크립트를 실행하는 시간만큼 지연이 발생합니다.
보통의 경우에는 defer가 더 좋은 방법으로 작용됩니다. 물론 사용되는 위치나 기능에 따라 달라요
DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에는 defer, 방문자 수나 광고 관련이나
기타 독립적인 스크립트 또는 실행 순서가 중요하지 않은 경우엔 asyn 을 사용하시면 되겠습니다.
감사합니다
