[asyn vs defer] HTML에서 JavaScript 파일 포함하기

 

 

 

 

🤷🏻‍♀️ JavaScript 파일을 어떻게 포함하는 것이 더 효율적일까?

 

HTML 문서의 head 안에서 js 파일을 포함시킬 때 asyn 또는 defer 키워드와 함께 작성할 수 있습니다. asyn와 defer 각 의미와 이 둘의 차이점을 알아보고, 어느 것을 사용하는 것이 더 효율적일지 알아 봅시다.

 

 

 

 

 

💡 asyn

 

JavaScript with asyn

 

 

브라우저가 HTML 문서를 파싱(parsing: 한 줄씩 분석하는 것)하다가 asyn 키워드를 만나면 자바스크립트 파일을 다운로드(fetch)하도록 명령합니다. 그리고 HTML 문서를 이어서 파싱하다가 자바스크립트 파일이 다운로드되면 HTML 문서 파싱을 멈추고 자바스크립트 파일을 실행한 뒤, 다시 HTML 문서를 파싱합니다.

 

 

asyn 키워드는 HTML 문서의 파싱이 완료되기 전에 자바스크립트 코드가 먼저 실행되므로 위험할 수 있습니다. (예: querySelector로 돔 요소를 조작할 경우) 만약 asyn 키워드로 포함된 자바스크립트 파일이 여러 개라면 자바스크립트 파일들의 순서를 무시하고 다운로드가 끝난 순서대로 실행됩니다.

 

 

 

 

 

 

 

💡 defer

 

JavaScript with defer

 

 

브라우저가 HTML 문서를 파싱하다가 defer 키워드를 만나면 자바스크립트 파일을 다운로드(fetch)하도록 명령해두고 병렬적으로 나머지 HTML 문서를 끝까지 파싱합니다. HTML 문서의 파싱이 완료되면 다운로드된 자바스크립트 파일을 바로 실행합니다. 

 

 

defer 키워드는 HTML 문서의 파싱이 완료된 후 자바스크립트 코드가 바로 실행되기 때문에 사용자에게 웹 페이지를 먼저 보여주게 됩니다. 만약 defer 키워드로 포함된 자바스크립트 파일이 여러 개라면 작성된 순서대로 실행됩니다.