> 웹 프론트엔드 > JS 튜토리얼 > JavaScript는 웹 페이지에서 스크립트 로딩 및 실행 순서를 어떻게 처리합니까?

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

Linda Hamilton
풀어 주다: 2024-12-11 02:47:09
원래의
373명이 탐색했습니다.

How Does JavaScript Handle Script Loading and Execution Order in Web Pages?

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

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

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

로드 중 순서

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

실행 순서

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

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

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

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

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

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

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿