웹 페이지에서 JavaScript 스크립트 실행 순서는 어떻게 작동합니까?

웹 페이지에서 JavaScript 스크립트의 실행 순서

웹 개발에서는 JavaScript 스크립트의 로딩 및 실행 순서를 이해하는 것이 중요합니다. 웹 페이지에 JavaScript를 포함하는 다양한 방법이 있으며, 각 방법은 로드 및 실행에 영향을 미칩니다.

JS 로드 및 실행 순서

기본적으로 스크립트는 다음에서 실행됩니다. 외부인지 인라인인지에 관계없이 페이지에 나타나는 순서입니다. 그러나 스크립트를 연기하거나 비동기적으로 로드하면 이 동작이 변경될 수 있습니다.

• defer: DOM이 완전히 구문 분석될 때까지 실행을 연기합니다. 모든 지연된 스크립트는 페이지 로드 후 발생한 순서대로 실행됩니다.
• async: 병렬로 로드하고 가능한 한 빨리 실행하므로 실행 순서와 이벤트 핸들러가 중단될 수 있습니다.

삽입된 스크립트 실행 순서

DOM 조작을 통해 스크립트를 동적으로 삽입하는 경우 브라우저에 따라 실행 순서에 영향을 줄 수 있습니다. Firefox에서 "async" 속성이 있는 삽입된 스크립트는 즉시 실행되는 반면, 이 속성이 없는 스크립트는 지연된 스크립트처럼 실행됩니다.

예: 인라인 스크립트 및 외부 스크립트 삽입

고려 초기화를 위한 헤드 스크립트와 동적으로 추가된 외부 스크립트가 있는 시나리오 body.

• 초기 헤드 스크립트: 페이지 앞부분에 나타나는 대로 먼저 실행합니다.
• 인라인 바디 스크립트 외부 스크립트 추가: 헤드 스크립트 이후에 실행됩니다.
• 외부적으로 추가된 스크립트: 실행은 브라우저 동작과 비동기/지연 속성에 따라 다릅니다.

브라우저 차이점

동적으로 삽입된 스크립트의 실행 순서는 다음과 같습니다. 브라우저마다 다릅니다. 최신 버전의 Firefox와 같은 일부 브라우저는 삽입된 스크립트를 자동으로 "비동기"로 설정하는 반면 다른 브라우저는 이를 동기식으로 처리합니다.

모듈 스크립트

최신 브라우저는 JavaScript 모듈 로딩을 지원합니다. "

저자별 최신 기사

최신 이슈

function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...

에서 2024-04-29 11:01:01

0

3

2205

Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?

에서 2024-04-23 00:22:19

0

11

2354

자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.

에서 2024-04-19 15:37:47

0

1

1971

상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');

에서 2024-04-18 23:52:34

0

1

1857

CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어

에서 2024-04-16 10:10:18

0

0

1921

관련 주제

더>

• 독립적인 직접 연결은 무엇을 의미하나요?
• JVM 메모리 사용량을 확인하는 방법
• JSP를 여는 방법
• HTML로 데이터를 얻는 방법
• insert문의 기본 사용법
• powerdesigner에서 단어를 내보내는 방법
• 이메일 주소 등록 신청 방법
• FIL을 장기간 보유할 가치가 있나요?