학습 노트 - 제2 장

HTML 에서 자 바스 크 립 트 사용 하기
2.1 원소

src 속성 은 현재 HTML 페이지 가 있 는 도 메 인 이외 의 도 메 인 에 있 는 전체 URL 을 가리 키 며 실행 코드 를 포함 하 는 외부 파일 을 표시 합 니 다.

코드 를 포함 하 더 라 도 defer 와 async 속성 이 존재 하지 않 는 다 면 브 라 우 저 는 요소 가 페이지 에 나타 난 선후 순서에 따라 그들 을 분석 합 니 다.

2.2.1 라벨 의 위치

페이지 가 지연 되 는 것 을 피하 기 위해 현대 웹 응용 프로그램 은 일반적으로 모든 자 바스 크 립 트 인용 을 요소 의 페이지 내용 뒤에 놓는다.

2.2.2 지연 스 크 립 트

defer 는 외부 스 크 립 트 파일

에 만 적 용 됩 니 다.

defer 속성 을 설정 하면 브 라 우 저 에 게 스 크 립 트 파일 을 즉시 다운로드 하 라 고 알려 주 는 것 과 같 지만 실행 이 지연 되 며, 포 함 된 스 크 립 트 는 브 라 우 저가 탭 을 만난 후에 실 행 될 것 입 니 다.

HTML 5 규범 은 스 크 립 트 가 나타 난 순서대로 실행 하도록 요구 합 니 다. 첫 번 째 지연 스 크 립 트 는 두 번 째 지연 스 크 립 트 보다 먼저 실 행 됩 니 다. 이 두 스 크 립 트 는 DOMContentLoaded 이벤트 보다 먼저 실 행 됩 니 다.

현실 에서 지연 스 크 립 트 가 반드시 순서대로 실행 되 는 것 도 아니 고 DOMContentLoaded 이벤트 가 발생 하기 전에 실행 되 는 것 도 아니 므 로 지연 스 크 립 트 만 포함 하 는 것 이 좋 습 니 다.

지연 스 크 립 트 를 페이지 상단 에 두 는 것 이 최선 입 니 다.

2.2.3 비동기 스 크 립 트

async 는 외부 스 크 립 트 파일 에 만 적 용 됩 니 다

이 속성 을 설정 하면 브 라 우 저 에 게 즉시 스 크 립 트 를 다운로드 하 라 고 알려 주 는 것 과 같 습 니 다. 이 는 페이지 가 비동기 스 크 립 트 다운로드 와 실행 을 기다 리 지 못 하 게 하기 위해 서 입 니 다.

async 속성 을 설정 한 스 크 립 트 는 지정 한 선후 순서에 따라 실행 되 지 않 기 때문에 각 비동기 스 크 립 트 간 의 상호 의존 을 확보 해 야 합 니 다.

비동기 스 크 립 트 는 반드시 load 이벤트 전에 실 행 될 것 입 니 다. 그러나 DOMContentLoaded 와 는 달리 그 전에 실 행 될 수도 있 고 그 후에 실 행 될 수도 있 습 니 다.

2.2 코드 와 외부 파일 삽입

자바 스 크 립 트 코드 를 포함 하 는 외부 파일 을 사용 하 는 것 이 좋 습 니 다.

유지 가능성

캐 시 가능 (두 페이지 모두 같은 파일 을 사용 하면 이 파일 은 한 번 만 다운로드 할 수 있 습 니 다)

미래 적응

2.3 문서 모드

문서 형식 (doctype) 전환 을 통 해 구현

최초의 두 가지 문서 모델 인 혼합 모델, 표준 모델

문서 시작 부분 에서 문서 형식 설명 이 발견 되 지 않 으 면 모든 브 라 우 저 는 기본적으로 혼합 모드 를 엽 니 다 (혼합 모드 에 서 는 브 라 우 저 차이 가 크 고 추천 하지 않 습 니 다)

2.4 원소