15. 코드 파일 다루기 | Notion

1. HTML에 불러오는 방법들

헤드에 스크립트로 로드

스크립트 동작하지 않음 - 스크립트 로드 시점에는 body 요소가 로드되지 않았음
스크립트의 크기가 클 경우 그 아래 요소들의 로드가 지연됨 - 동기적 로드

// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Hello World!</title>
	<script src="./index.js"></script>
</head>
<body>
  <span>변경 전...</span>
</body>
</html>

// index.js
document.querySelector('span').innerText = '텍스트 변경됨';

body 요소들 아래에 로드

동작은 하지만 좋은 코드가 아님 ⇒ 동기적 로드
HTML DOM이 로드 되기 전까지 script의 로딩과 파싱이 완전히 차단
규모가 커지면 속도 저하 성능 문제를 발생

// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Hello World!</title>
</head>
<body>
  <span>변경 전...</span>
	<script src="./index.js"></script>
</body>
</html>

document.querySelector('span').innerText = '텍스트 변경됨';

onload 이벤트 사용

스크립트를 실행하기 위한 onload 이벤트 등록 필요
문서의 동기적 로드 문제 여전

// index.html
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Hello World!</title>
	<script src="./index.js"></script>
</head>
<body>
  <span>변경 전...</span>
</body>
</html>