며칠 전 prompt 관련 포스팅을 하며 제대로 되지 않아서 왜 안되는거야!!! 했었는데 찾아보니 태그 위에 있어서 dom이 body 태그 안에 div태그를 만들기 전에 스크립트를 실행하였고 div태그를 찾지 못해서 발생하는 오류 였다.
(중요!) 돔은 스크립트를 만나면 모든 생성을 멈춘다!
<!--이러한 구조를 가지고 있던-->
<html>
<head></head>
<script></script>
<body>
<div></div>
여기다 스크립트 태그를 넣어준다면?
</body>
</html> 가장 대표적인 방법은 마지막에 스크립트를 실행하기 위해서 body태그 밑에 script태그를 넣는 방식이다. 그러면 html태그를 모두 불러오고 script를 실행하기 때문에 내가 겪었던 문제를 해결 할 수 있다.
but script로 dom element들을 적용하는 경우 script로 html을 컨트롤 하는 경우가 많은 경우에는 문제가 생겨버린다. ( 웹이 제대로 작동하지 않을 수 있다.)
그런 문제를 해결 하기 위해 async 와 defer가 나왔다.
async 와 defer는 dom 생성과 다르게 작동한다. script태그를 만나도 멈추지 않고 dom을 만든다.
defer
브라우저는 defer 속성이 있는 스크립트는 백그라운드에서 다운로드 합니다. 그리고 돔을 계속해서 생성합니다. script를 다운받고 dom이 완료되지 않았다면 dom이 완료된 후에 실행합니다. defer 속성은 외부 스크립트에만 유효합니다. src속성이 없다면 적용되지 않습니다.!
async
async속성이 붙어있는 스크립트는 페이지와 완전히 독립적으로 작동합니다. defer와 마찬가지로 백그라운드에서 다운됩니다. but 스크립트가 실행될 때 HTML은 parsing을 멈춥니다.
DomContentLoaded 이벤트와 async 스크립트는 서로를 기다리지 않습니다. (defer와 다르다) 그래서 페이지 구성이 끝나고 async 스크립트 다운로딩이 끝난 경우, async 스크립트 실행 전에 dom이벤트는 발생할 수 있습니다.
async 스크립트가 짧아 페이지 구성이 끝나기 전에 다운되거나 스크립트가 캐싱처리 된 경우 (캐싱 처리?) Domcotentloaded는 async 스크립트 실행 후에 발생할 수도 있습니다.
async는 독고다이입니다. 다른 스크립트를 기다리지 않습니다. defer와의차이점입니다. defer는 신사입니다. 다른 스크립트들을 기다려줍니다.
