js 파일 불러오기
Head 태그 내부에 위치할 때
방법 1) < script > 태그 안에 작성
방법 2) < script > 태그의 src 속성에 js 파일 경로 작성
< head > 태그는 사람들에게 직관적으로 보이지 않는 내용
< body > 태그는 사람들에게 직관적으로 보여지는 내용
방법 1 & 방법 2
< head > 안에 < script > 태그를 넣은 경우
로드 시점 : < script > 가 페이지의 렌더링이 시작되기 전에 로드
장점 : < script >가 페이지 내용을 수정하거나 초기화 할 수 있으므로
초기화 작업이 필요한 경우 적합
단점: < script > 가 페이지 렌더링을 차단할 수 있어 사용자가 페이지르 빠르게
볼 수 없는 문제가 발생 가능
ex) < script >의 내용이 너무 길면 흰 화면이 오래 보여 오류처럼 보일 수 있음
Body 태그 내부에 위치 할 때
방법 3) < script > 태그 안에 작성
방법 4) < script > 태그의 src 속성에 js 파일 경로 작성
html 코드는 위에서부터 아래방향으로 순차적으로 읽는다.
방법3 & 방법4
< body > 안에 < script> 태그를 넣을 경우
로드 시점 : 페이지의 나머지 콘텐츠가 로드된 후에 < script >가 로드.
장점 : 페이지의 초기 렌더링이 완료된 후에 동적으로 콘텐츠를 조작하거나 로드 할 수 있다.
단점 : 페이지의 초기 렌더링은 빠를 수 있지만, 페이지의 전체적인 UX(사용자 경험)이 끝날 때까지 < script >의 로드가 지연 될 수 있다.
ex) 먼저 버튼이 보여지지만, < script >가 로드 되기 전에 버튼을 누르면 동작을 안하기 때문에 오류 처럼 보일 수 있음.
