TAGS

Draft
  • account_tree
  • bug_report

Element<script>

자바스크립트를 페이지 내부에 작성하거나 외부의 *.js 파일을 가져온다.

  • 콘텐츠 분류

    Flow Content, Phrasing Content, Metadata Content

  • DOM Interface

    HTMLScriptElement

  • 태그 생략

    시작 태그, 종료 태그 모두 작성

설명

<script> 태그는 <head> 또는 <body> 내에서 작성이 가능하며 기본적으로 순차적으로 해석된다. <script>는 src 속성 사용 여부에 따라 <script> 내에 자바스크립트 코드 작성 여부를 결정한다. 즉 src 속성을 정의하면 외부에서 가져오는 것에 우선 순위를 두게되며 <script> 내에 다른 스크립트를 작성할 수 없다. 하지만 자바스크립트에서 가능한 주석 작성은 할 수 있다.

웹브라우저는 HTML 구문 분석중 <script> 태그를 만나면 인라인(inline) 스크립트 또는 async, defer, type="module" 속성이 없는 경우에는 스크립트를 로드하여 평가하기 전까지 HTML 구문 분석을 중단한다.

속성

async Boolean

자바스크립트가 웹 문서에 포함이 되지만 웹 문서와는 완전하게 독립적으로 동작하도록 한다.

crossorigin DOMString

교차출처(CORS) 정책에 따라 리소스를 가져올지를 나타낸다.

defer Boolean

웹브라우저가 스크립트 문서를 분석한 후 DOMContentLoaded가 발생되기 이전에 실행하도록 한다.

nomodule Boolean

ES6의 module을 지원하는 웹브라우저에서 실행하지 않을 스크립트임을 나타낸다.

src DOMString

사용할 리소스의 경로를 설정한다.

type DOMStringString

다양한 태그에서 사용되는 속성이며 태그에 따라 처리되는 값을 '유형/타입' 형식 또는 지정된 키워드로 지정한다.

이 요소에서의 사용 참고 사항

스크립트 유형을 나타낸다. 일반적으로 다음 중에서 값을 지정한다.

  • 생략하거나 JavaScript MIME 유형 지정 : 스크립트 유형을 JavaScript로 명시한다. 즉 text/javascript로 지정할 수 있으며 대소문자 동일하다.
  • module : ES6를 지원하는 웹브라우저에서 가능하며 스크립트를 모듈(module)로 처리한다.

기술 문서

비슷해 보이지만 다른 async와  defer 속성의 실행시 차이

이 두 개의 속성은 비동기적으로 다운로드를 실시한다는 것은 동일하지만 실행시 다음과 같은 차이점이 있다.

 순서시점용도
asyncload-first order 방식이 적용된다. 즉 작성 순서와 관계없이 먼저 로드된 스크립트를 먼저 실행한다.HTML 문서가 완전히 로드 되지 않았거나 구문 분석이 끝나지 않더라도 실행될 수 있다. 스크립트 크기가 작거나 캐싱된 경우와 HTML 코드가 매우 긴 경우에 발생할 수 있다.독립적인 실행 프로세스이며 실행 순서와 관계없는 경우
defer작성된 순서에 따라 실행한다.다운로드 된 스크립트는 HTML 구문 분석이 완료된 후에 작성된 순서에 따라 DOMContentLoaded 이벤트가 발생하기 전에 순차적으로 실행한다.DOM을 다루면서 실행 순서가 필요한 경우
defer 속성을 사용하게 되면 스크립트가 실행하기 전에 DOM이 화면에 렌더링된다. 따라서 완전히 생성되지 않은 UI가 보여질 수 있으므로 적절한 시각적/기능적 처리를 통해 오작동이 발생하지 않도록 할 필요가 있다.

지원 웹브라우저