HTML에서 JavaScript를 효율적으로 임포트하고 실행하는 방법
웹 개발을 하다 보면 JavaScript를 HTML 파일에 임포트하는 일이 많습니다. 이 글에서는 HTML 파일에 JavaScript를 임포트하고 최적화하는 방법을 소개하겠습니다.
1. 스크립트 위치 선택
JavaScript 파일을 HTML에 임포트할 때는 주로 두 가지 위치를 고려할 수 있습니다:
<body>끝부분에 추가: HTML의 모든 요소가 로드된 후 스크립트가 실행되기 때문에, HTML 요소에 의존하는 스크립트에 유리합니다.<head>에 추가: HTML 구문 분석 도중 스크립트가 실행될 수 있어, HTML 요소가 준비되지 않은 상태에서 스크립트가 실행될 위험이 있습니다.
2. 성능 분석 도구 활용
Chrome 시크릿 창을 사용해 개발자 도구의 Performance 탭에서 페이지 로딩 성능을 분석할 수 있습니다.
- Chrome 시크릿 창을 엽니다.
- 개발자 도구를 열고 Performance 탭으로 이동합니다.
- Record 버튼을 눌러 페이지 로딩 과정을 기록합니다.
- 새로 고침 버튼을 눌러 페이지를 새로 고칩니다.
- 기록을 정지하고 로딩 과정을 분석합니다.
이를 통해 스크립트 로딩 및 실행 시간을 확인할 수 있습니다.
3. 스크립트 로딩 최적화
JavaScript를 효율적으로 로딩하고 실행하기 위해서는 defer와 async 속성을 활용할 수 있습니다.
-
defer속성:- 스크립트가 HTML 구문 분석이 끝난 후 실행됩니다.
- 구문 분석을 차단하지 않으면서 스크립트를 미리 로드할 수 있습니다.
<script src="script.js" defer></script> -
async속성:- 스크립트가 다운로드된 즉시 실행됩니다.
- 실행 순서가 보장되지 않으므로 독립적인 스크립트에 유용합니다.
<script src="script.js" async></script>
4. 구문 분석과 실행 순서
defer를 사용한 경우: 스크립트의 실행 순서가 보장됩니다.async를 사용한 경우: 다운로드된 순서대로 실행되므로, 실행 순서가 보장되지 않습니다.
5. 인라인 스크립트 사용 자제
defer와async는 외부 스크립트에서만 사용할 수 있습니다.- 중요한 스크립트는 외부 파일로 분리하고 HTML 파일은 작고 집중적으로 유지하는 것이 좋습니다.
결론
JavaScript로 작업할 때는 defer 속성을 사용하여 스크립트를 미리 로드하고, HTML 구문 분석이 끝난 후에 실행되도록 하는 것이 좋습니다. async는 독립적으로 실행되는 스크립트에 사용하고, 인라인 스크립트는 피하는 것이 좋습니다. 이를 통해 웹 페이지의 로딩 속도와 성능을 최적화할 수 있습니다.
