script, script async, script defer
<script> 태그는 HTML 문서에서 JavaScript 코드를 로드하고 실행하는 데 사용됩니다. <script> 태그에는 세 가지 주요 속성이 있습니다: async, defer, 그리고 속성 없음.
<script>:
<script> 태그에 속성이 없는 경우, 브라우저는 스크립트를 로드하고 파싱하는 동안 HTML 문서의 파싱을 중단합니다. 스크립트는 로드되는 순서대로 실행되며, 다른 리소스의 로드를 차단합니다. 스크립트의 실행이 완료되기 전까지 HTML 파싱이 중단되기 때문에, 스크립트가 크거나 다운로드 속도가 느릴 경우 페이지 로딩이 지연될 수 있습니다.
<script async>:
async 속성을 사용하면 스크립트가 비동기적으로 로드되고 실행됩니다. HTML 파싱은 스크립트 로드와 동시에 계속되며, 스크립트 로드가 완료되면 즉시 실행됩니다. 다른 리소스의 로드를 차단하지 않으므로, 다운로드되는 동안 HTML 문서의 파싱과 렌더링이 계속될 수 있습니다. 그러나 스크립트의 실행 순서가 보장되지 않으므로, 스크립트 간의 종속성이나 실행 순서가 중요한 경우에는 주의해야 합니다.
<script defer>:
브라우저는 defer 속성이 있는 스크립트(이하 defer 스크립트 또는 지연 스크립트)를 '백그라운드’에서 다운로드 합니다. 따라서 지연 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않습니다. 그리고 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연 됩니다.
속성에 따른 사용
일반적으로, 스크립트를 <head> 태그 내에 위치시키는 경우에는 <script>를 사용하거나, <script async>를 사용하여 로드 및 실행 순서에 대한 신경을 쓰지 않을 수 있습니다. 반면에, 스크립트를 <body> 태그 내의 마지막 부분에 위치시키는 경우에는 <script defer>를 사용하여 HTML 파싱과 렌더링이 완료된 후에 스크립트를 실행할 수 있습니다.
