안녕하세요. 혀코입니다.
이번 시간에는 script 태그의 async와 defer attribute의 차이점에 대해서 알아보겠습니다.
웹사이트의 어느 한 페이지를 로드할 때, html 파일의 첫번째 줄부터 마지막 줄 까지 차례대로 파싱(parsing)해서 웹브라우저에 출력해 줍니다.이때, JavaScript 코드의 경우, 대부분의 경우 body 태그 안의 태그(element)들을 잡아서 변형을 해야하는 경우가 대부분인데 JavaScript 코드가 head 태그 안에 있을 경우, body 태그의 태그들이 아직 읽히기 전이여서 에러를 발생하게됩니다. 그래서 이러한 현상을 방지하기 위해서 body 태그의 맨 마지막 부분에 JavaScript를 추가합니다.
그러나 이 경우에 웹페이지 사이즈가 아주 큰 경우, 웹사이트 속도가 느려질 수 있습니다. 왜냐하면 html을 거의 다 다운로드 받은 상태에서 javascript를 추가로 다운로드 받아서 실행해야하기 때문입니다.
그래서 외부 JavaScript 파일을 head 태그에 넣어 미리 다운로드 받아야 하는 데 이때에는 async와 defer 속성(attribute)를 추가해서 외부파일인 JavaScript를 추가해 주면 위와 같은 문제를 해결할 수 있습니다.
async attribute는 백그라운드에서 외부 자바스크립트 파일을 다운로드 받아서 html 파싱을 잠시 멈추고 바로 실행시켜 주며, defer attribute는 백그라운드에서 외부 자바스크립트 파일을 다운로드 받아놓고 html 파싱이 끝나면 실행을 시켜주는 차이가 있습니다.
이렇게 script 태그의 async와 defer attribute의 차이점에 대해서 알아보았습니다.
해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글