JavaScript 스크립트 로드 및 실행 순서는 인라인, 외부, 비동기, 지연 및 동적으로 추가된 스크립트에 따라 어떻게 다릅니까?

JavaScript 스크립트의 로드 및 실행 순서 이해

웹 페이지의 JavaScript 실행 순서는 외부 스크립트를 포함하는 다양한 방법과 동적 스크립트 추가로 인해 복잡할 수 있습니다. 복잡한 내용을 명확히 하기 위해 다양한 시나리오에 따라 JavaScript 스크립트의 로드 및 실행 순서를 자세히 살펴보겠습니다.

인라인 스크립트와 외부 스크립트

인라인 코드인지 또는 로드된 외부 스크립트인지에 관계없이 URI를 사용하는 경우 스크립트는 구문 분석 중에 페이지에 나타나는 순서대로 실행됩니다. 따라서 외부 스크립트 뒤의 인라인 스크립트는 해당 외부 스크립트가 로드되어 실행될 때까지 기다립니다.

비동기 스크립트

async 속성으로 표시된 비동기 스크립트는 예측할 수 없는 순서로 실행됩니다. 브라우저는 이를 병렬로 로드하고 순서에 관계없이 실행합니다.

Defer 스크립트

defer 속성이 있는 Defer 스크립트는 로드되지만 구문 분석이 완료될 때까지 유지됩니다. 그런 다음 지연된 스크립트 간의 종속성을 유지하면서 발생한 순서대로 실행됩니다.

동적으로 추가된 스크립트

동적 스크립트 삽입 동작은 브라우저에 따라 다릅니다. 예를 들어, Firefox는 별도로 지정하지 않는 한 기본적으로 동적으로 추가된 스크립트 태그를 비동기로 설정합니다. 비동기 스크립트는 즉시 실행될 수도 있고 파싱 후에 실행될 수도 있습니다.

실행 순서

위를 고려하면, 원래 질문에 설명된 시나리오의 실행 순서는 다음과 같습니다.

• 의 초기화 및 스크립트 로딩 스크립트 (순서대로 로드하고 실행)
• 스크립트를 동적으로 로드합니다(의 외부 스크립트 뒤에 나타남)
• 의 두 번째 인라인 스크립트 동적으로 로드된 스크립트에 의존
• 동적으로 로드된 외부 스크립트는 병렬(예측할 수 없는 순서)로 로드 및 실행됩니다.
• 두 번째 인라인 스크립트는 동적으로 로드된 스크립트가 성공적으로 실행된 후에만 실행됩니다. 이는 브라우저가 일반적으로 스크립트가 발생한 순서대로 스크립트 실행을 우선시하기 때문입니다.

위 내용은 JavaScript 스크립트 로드 및 실행 순서는 인라인, 외부, 비동기, 지연 및 동적으로 추가된 스크립트에 따라 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!