[JavaScript] html 문서에 JavaScript를 포함할때 어떻게 포함하는게 효율적일까? (head,body,defer, async)

blocked -> fetching.js -> executing.js -> parsing.html head blocked -> fetching.js -> executing.js -> parsing.html 1.parsing html 사용자가 html 파일을 다운로드하였을 때 브라우저가 1줄씩 parsing 하게 된다. 이때 css와 병합해서 dom요소로 변환하게 된다. 2.blocked html을 쭉 parsing 하다가 script 태그가 보이면 main.js를 다운로드해야 되네?라고 이해하고 html parsing을 멈추게 된다. 3.fetching.js script 태그에 해당되는 main.js 파일을 서버에서 다운로드 받게 된다. 4.executing.js 다운로드가 완료되면 main.js파일을 ..