HTML이 로딩될 때 가장 빠르게 JavaScript를 호출하려면, 다음 두 가지 방법을 사용할 수 있습니다:
1. <head> 태그에 defer 또는 async 속성을 사용하여 <script>를 배치
JavaScript 파일을 <head> 태그에 위치시키면서 defer 또는 async 속성을 사용하면 빠르게 로딩하면서도 HTML 구조의 렌더링에 영향을 주지 않습니다.
defer: 스크립트를 비동기적으로 다운로드하고, HTML 파싱이 완료된 후 실행됩니다. HTML 파싱을 방해하지 않으면서 스크립트를 안전하게 실행할 수 있습니다.async: 스크립트를 비동기적으로 다운로드하고, 다운로드가 완료되면 즉시 실행됩니다. 단,async는 여러 스크립트가 있는 경우 실행 순서를 보장하지 않으므로 주의가 필요합니다.
<head>
<script src="script.js" defer></script>
</head>또는
<head>
<script src="script.js" async></script>
</head>2. <body> 태그 끝에 배치
<body> 태그 끝에 스크립트를 배치하면 HTML 문서가 먼저 로딩된 후에 스크립트가 실행됩니다. 이 방법은 defer 속성과 유사한 동작을 하며, 페이지 로드가 완료된 후 스크립트를 호출하므로 일반적으로 안전한 방식입니다.
<body>
<!-- HTML Content -->
<script src="script.js"></script>
</body>결론:
- 가장 좋은 방법은
<head>에 스크립트를 넣고defer속성을 사용하는 것입니다. 이는 HTML 파싱이 끝난 후 스크립트를 실행하므로 실행 순서를 보장하면서도 성능을 높일 수 있습니다. async는 비동기 실행이 필요할 때 사용하지만, 여러 스크립트 간 실행 순서가 중요하지 않을 때에만 적합합니다.<body>끝에 스크립트를 배치하는 방법도 효과적이며, 전통적으로 많이 사용되는 방식입니다.
반응형
'IT 개발' 카테고리의 다른 글
| [javascript] 이미지 처리에서 EXIF 정보가 사라지는 이유와 방지 방법 (2) | 2024.12.11 |
|---|---|
| M4 맥미니 가성비 최강인 이유(mac mini m4 사양, 벤치점수, 사전예약, 출시일 정보) (1) | 2024.11.20 |
| 아이폰 16 시리즈: 출시 일정과 예상 스펙 총정리 (2) | 2024.09.03 |
| NFC 태그란? 원리와 활용 분야 (0) | 2024.08.20 |
| [Java] String을 int로, int에서 String으로 변환하기: 문자열 숫자 변환 (1) | 2024.07.10 |
댓글