defer는 HTML의 <script> 태그에서 사용되는 속성으로, 스크립트를 비동기적으로 로드하면서도 HTML 문서의 파싱이 완료된 후에 실행되도록 지정하는 역할을 합니다.
쉽게 말해, defer를 사용하면:
- 스크립트 파일을 다운로드하는 동안 HTML 문서를 계속 읽습니다(멈추지 않음).
- HTML 문서가 전부 로드된 후에 스크립트를 순서대로 실행합니다.
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Defer 예제</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>
주요 특징
- defer가 없는 경우: 스크립트를 로드하고 실행하는 동안 HTML 파싱이 멈춥니다.
- defer가 있는 경우: HTML 파싱은 계속 진행되고, 모든 HTML이 파싱된 후 스크립트가 실행됩니다.
- 스크립트 실행 순서 보장: 여러 개의 defer 스크립트는 순서대로 실행됩니다.
결론적으로, defer는 성능을 최적화하고, 스크립트가 DOM에 의존할 때 유용합니다!
오늘 팀과제를 하면서 자바스크립트 코드 하나를 불러오려면 defer라는 것을 추가 해야한다해서 알아보게 되었다. 오늘도 새로운 것을 습득했다... 코딩마스터에 길을 멀고도 험하다... 화이팅...
'TIL' 카테고리의 다른 글
| 행열 더하기 (0) | 2024.12.24 |
|---|---|
| Git & Github 기초 뿌시기 (0) | 2024.12.23 |
| 스타벅스 주문 시스템 만들기 (0) | 2024.12.18 |
| DOM(Document Object Model) (0) | 2024.12.17 |
| 팀 과제 (1) | 2024.12.16 |