JavaScript는 웹 페이지에서 스크립트 로딩 및 실행 순서를 어떻게 처리합니까?

웹페이지에서 JavaScript 스크립트의 로딩 및 실행 순서는 어떻게 되나요?

JavaScript 스크립트는 다양한 방식으로 웹페이지에 포함될 수 있습니다. 다음을 포함한 방법:

• 인라인 코드 또는 외부에서 로드 URL
• 또는 태그
• no, defer 또는 async 속성 포함(외부 스크립트에만 해당)
• 정적 소스 내에 포함되거나 다른 스크립트를 사용하여 동적으로 추가

로드 중 순서

스크립트는 HTML 코드에 표시된 순서대로 로드됩니다. 인라인인지 외부인지 여부. 그러나 동적으로 추가된 스크립트는 브라우저 동작의 로딩 순서에 영향을 받을 수 있습니다.

실행 순서

JavaScript 스크립트의 실행 순서는 여러 요소에 따라 달라집니다.

• 일반 규칙: 스크립트는 페이지에서 만나는 순서대로 실행됩니다. 비동기로 표시된 스크립트의 경우.
• 비동기 스크립트: 비동기로 표시된 스크립트는 예측할 수 없는 순서로 실행됩니다. 로드되자마자 또는 파서가 완료된 후에 실행될 수 있습니다.
• 동적으로 추가된 스크립트: 동적으로 추가된 스크립트의 동작은 브라우저에 따라 다릅니다.
• defer 스크립트: defer로 표시된 스크립트는 파서가 완료될 때까지 기다린 다음 원래 순서대로 실행됩니다.
• 모듈 스크립트(type="module"): 모듈 스크립트에는 defer 속성이 자동으로 부여되며 구문 분석이 완료된 후 순서대로 실행됩니다. 또한 비동기 속성을 사용하여 인라인 모듈 스크립트를 즉시 실행할 수도 있습니다.

예

본문에 인라인 스크립트가 포함된 주어진 예에서 로딩 순서는 is:

1. 초기화 스크립트
2. 스크립트 로딩을 위한 외부 스크립트
3. 다른 외부 스크립트를 추가하는 인라인 스크립트
4. 추가된 외부 스크립트를 사용하는 인라인 스크립트

실행 순서는 동적으로 추가된 스크립트가 비동기로 표시되는지 아니면 비동기로 표시되는지에 따라 달라집니다. 아님:

• 추가된 스크립트가 비동기로 표시되지 않은 경우 해당 스크립트를 추가한 인라인 스크립트 다음에 실행됩니다.
• 추가된 스크립트가 비동기로 표시되면 실행 순서 예측할 수 없으며 이를 추가한 인라인 스크립트 전후에 발생할 수 있습니다.

위 내용은 JavaScript는 웹 페이지에서 스크립트 로딩 및 실행 순서를 어떻게 처리합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!