취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다.
✅ <script>
<script>는 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JS 코드와 함께 사용한다.
<script src="javascript.js"></script>
<script>
alert("Hello World!");
</script>
위와 같이 외부 스크립트를 가져오거나 <script> 태그 내부에 인라인 스크립트를 작성할 수 있다.
✅ <script async>
<script async>는 스크립트가 나머지 페이지와는 비동기적으로 실행됨을 나타내며 브라우저가 페이지를 파싱하는 동안에도 스크립트가 사용 가능해지면 즉시 실행함을 명시한다.
<script src="/examples/scripts/script_async.js" async></script>
async 속성은 boolean 속성으로 명시하지 않으면 false 값을 가지게 되고 명시하면 true 값을 가진다.
이 속성은 <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있어 src 속성이 반드시 필요하다.
✅ <script defer>
<script defer>는 페이지가 모두 로드된 이후에 해당 외부 스크립트가 실행됨을 명시한다.
<script src="/examples/scripts/script_src.js" defer></script>
defer 속성은 async 속성과 동일하게 boolean 속성으로 명시하지 않으면 false 값을 가지게 되고 명시하면 true 값을 가진다.
또한 <script> 요소가 외부 스크립트를 참조하는 경우에만 사용할 수 있어 src 속성이 반드시 필요하다.
✅ <script> vs <script async> vs <script defer>
<script> |
HTML 파싱이 중단되고 즉시 스크립트가 로드된다. 로드된 스크립트의 실행이 종료되면 파싱이 재개된다. |
<script async> |
HTML 파싱과 병렬적으로(비동기적으로) 스크립트가 로드된다. 파싱하는 동안에도 스크립트 실행이 가능하며 스크립트를 실행할 때는 파싱이 중단된다. Google Analytics와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다. |
<script defer> |
HTML 파싱과 병렬적으로(비동기적으로) 스크립트가 로드된다. 파싱이 모두 끝나면 스크립트를 실행한다. <body> 태그 직전에 <script> 를 삽입하는 것과 동작이 동일하다. (하지만 이는 브라우저 호환성에 따라 다를 수 있다.) |
이를 그림으로 비교하자면 다음과 같다.
🔍 참조
<script> https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
<script async> http://tcpschool.com/html-tag-attrs/script-async
<script defer> http://tcpschool.com/html-tag-attrs/script-defer
async vs defer attributes https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
'엘리스 AI 트랙 4기 > Frontend CS Study' 카테고리의 다른 글
| [CSS] 박스 모델 (0) | 2022.03.09 |
|---|---|
| [HTML] Sematic Markup (0) | 2022.02.13 |
| [HTML] local storage, session storage, cookie (0) | 2022.02.05 |
| [HTML] data- 속성 (0) | 2022.02.04 |
| [HTML] 표준 모드와 호환 모드 (0) | 2022.02.04 |
댓글