html에서 script 태그는 어느 위치에서나 사용할 수 있다.
하지만 브라우저가 parsing 할 때 html을 DOM 트리로 만들고, css를 CSOM 트리로 만드는데 이때 script 태그를 만나게되면 script parsing이 끝날때까지 html과 css의 parsing이 멈추게 된다.
이를 freezing 현상이라 한다.(병목 현상)
<html>
<head>
<script></script>
</head>
<body></body>
</html>script 태그가 위 코드처럼 body 태그 이전에 위치하면 script 태그가 parsing 되는 동안 화면에 아무것도 렌더링이 안될 수 있다.
또한 html의 parsing이 끝나지 않아 DOM이 완성되지 않았기 때문에 DOM API를 호출할 수 없으며(호출해도 에러 발생) 특정 DOM에 접근 할 수 없다.
<html>
<head> </head>
<body>
//.............................
<script></script>
</body>
</html>script 태그가 위 코드처럼 body 태그에서 body 태그가 닫히기 전에 위치하면 DOM과 CSOM 트리가 완성된 이후이기
때문에 DOM에 접근 가능하고 DOM API도 호출할 수 있다.
이처럼 script 태그의 위치는 브라우저 rendering에 영향을 준다.
즉, script 태그가 DOM, CSOM이 완성되기 전에 parsing되면 웹 페이지 로딩 속도가 느려지게 되고 성능 또한 떨어뜨리는 결과를 낸다.
이를 해결하기 위해 script 태그에 async와 defer라는 속성을 주는 방법이 있다.
<script async src="" >
<script defer src="" >defer는 브라우저가 작업을 계속하고 백그라운드에서 script를 로드하고 DOM이 로드 될때 script를 실행한다.
defer는 문서의 순서가 중요하다.
전체 DOM이 필요한 script에 사용되며 실행 순서가 중요하다.
async는 script가 독립적이다.
async는 문서의 순서가 중요하지 않다.
(async script가 여러개면 먼저 로드된것부터 실행된다. 다른 async script를 기다리거나 기다리게 하지 않는다.)
독립적인 script에 사용된다.