ATTRIBUTES

  • account_tree
  • bug_report

defer

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

설명

웹브라우저는 웹 문서가 다운로드가 되면 HTML 코드에 대한 구문 분석을 시작한다. 즉 DOM 구조화 작업이 이루어지고 그 결과를 화면에 렌더링한다. 그러나 분석 과정에서 <script> 태그를 만나고 src 속성이 설정되어 있다면 서버로부터 자바스크립트 코드를 다운로드한다. 이 과정에서 웹브라우저는 자바스크립트 코드를 다운로드하고 평가가 끝날 때까지 DOM 구조화 작업이 보류된다. 이 방식은 이후에 다른 <script> 태그를 만나는 경우에도 동일하다.

이 메커니즘을 갖는 이유는 자바스크립트 코드가 DOM에 상당히 관여할 것이라는 예상 때문에 그렇다. 따라서 특정 자바스크립트 코드가 DOM에 관여하든 그렇지 않든 상당한 시간이 소요되는 처리가 포함되어 있다면 그 시간 동안은 화면에 그려지는 렌더링 시간이 지연될 것이다. 이것은 작성된 코드에 따라서 필요한 절차일 수도 있고 그렇지 않을 수도 있다. 그렇기 때문에 자바스크립트 코드를 서버로부터 다운로드하고 평가하는 과정을 HTML 구문 분석과는 무관하게 비동기적인 처리를 해야할 때도 있을 것이다. HTML 구문 분석과 관계없이 자바스크립트 코드를 다운로드 받고 HTML 구문 분석이 끝난 후에 실행해도 무관하다면 구지 HTML 구문 분석 작업을 일시 중지할 필요가 없다.

defer 속성은 서버로부터 자바스크립트 코드를 다운로드 받는 절차를 비동기적으로 처리하고 실행은 HTML 구문 분석이 완전히 끝난 후에 실행할 수 있게 한다. 한가지 참고할 점은 HTML 구문 분석이 끝난 시점은 오로지 DOM에 한정된다. 즉 스타일, 이미지, 프레임 내의 로딩은 해당되지 않는 DOMContentLoaded 이벤트가 발생한 시점이다.

defer 속성은 비동기적인 로드와 실행 시점을 미루는 것 이외에 병렬 처리가 아닌 순차적인 처리를 하도록 한다. 웹브라우저는 기본적으로 문서 내의 모든 <script> 태그에 src 속성을 확인하고 한번에 다운로드를 시도한다. 그리고 다운로드가 완료되는 대로 코드를 평가한다. 그렇기 때문에 코드상의 순서가 실행상의 순서라고 단정 지을 수 없다. defer 속성이 정의되어 있다면 백그라운드에서 비동기적으로 다운로드를 하고 실행 시점에서는 순차적으로 실행하도록 한다.

<script> 태그에 src 속성이 정의되어 있지 않다면 defer 속성은 무시된다.

defer 명세

불리언(boolean) 값을 나타낸다. 예를 들어 다음 세 가지 값은 모두 참(true)이다.

<input disabled>, <input disabled="disabled">, <input disabled="">

지원 웹브라우저