Javascript의 defer 속성은 왜 사용하는가?

Javascript의 defer 속성은 왜 사용하는가?

Web
Javascript의 defer 속성은 왜 사용하는가?
Author

gabriel yang

Published

January 3, 2024

Javascript의 defer 구문은 왜 사용하는가?

JavaScript를 활용할 때 웹 페이지의 로딩 속도와 상호작용을 최적화하는 것은 필수적입니다. 이와 관련하여 ‘defer’ 속성은 중요한 역할을 합니다. 본문에서는 JavaScript에서 ‘defer’ 속성을 사용하는 이유와 간단한 예제 코드를 소개하겠습니다.

defer 속성이란?

defer는 <script> 태그에 사용되는 속성입니다. 이 속성은 HTML 파싱 동안 외부 스크립트를 비동기적으로 로드한 후, HTML 파싱이 완료된 후에 스크립트를 실행하도록 합니다. 이 속성은 사용하면 페이지 로딩 시간을 최적화할 수 있고 스크립트의 순차적 실행을 보장합니다 HTML 파싱이 완료된 후 script가 동작하기 때문에 DOM()이 완전히 구성된 상태에서 script가 실행되는 장점이 있습니다.

웹페이지 로딩 순서

웹 페이지 로딩 순서를 사용자가 웹 페이지에 접근하면 아래의 과정이 수행됩니다.

  1. 웹 페이지 로딩 시작 사용자가 웹 페이지에 접근하면 로딩 과정이 시작됩니다.

  2. HTML 파싱 브라우저는 HTML 문서의 파싱을 시작합니다. 이 단계에서 문서의 구조가 분석되며, 이는 페이지의 렌더링 기초를 형성합니다.

  3. Defer 속성을 가진 Script 태그 : HTML 파싱 중 defer 속성을 갖는 script 태그를 만나면 비동기적으로 다운로드됩니다.

  4. 해당 스크립트는 HTML 파싱을 방해하지 않고 비동기적으로 다운로드됩니다. 이는 웹 페이지의 성능을 향상시키는 중요한 단계입니다.

  5. 스크립트 다운로드와 동시에 HTML 문서의 파싱이 계속됩니다. 이 과정은 페이지 로딩의 효율성을 높입니다.

  6. HTML 문서의 파싱이 완료되며 이제 스크립트 실행이 가능합니다.

  7. 스크립트 실행 : 모든 HTML 파싱이 완료된 후, defer로 표시된 스크립트들이 순서대로 실행됩니다. 이 단계는 스크립트의 올바른 작동을 보장합니다.

  8. 웹 페이지 로딩 완료 : 모든 스크립트가 실행되고, 페이지 로딩이 완료됩니다.

플로우 차트로 간단히 정리하면 아래와 같습니다.

예제 코드로 이해하기

HTML과 Javascript 코드를 통해서 defer 속성의 동작을 확인합니다. HTML코드는 defer속성을 사용하여 example.js 스크립트를 사용합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Defer Example</title>
    <script src="example.js" defer></script>
</head>
<body>
    <h1>Hello, world!</h1>
    <p id="demo"></p>
</body>
</html>

HTML 코드에서 사용하는 example.js는 아래와 같이 HTML문서의 demo ID 정보를 얻어야 정상적으로 동작합니다. head에서 실행될 때는 HTML문서 정보가 없기 때문에 문제가 발생하지만 defer속성으로 스크립트가 실행되는 시간은 HTML 코드가 모두 로드된 후에 사용됩니다.

// example.js

// 이 스크립트는 페이지 로드 후에 실행됩니다.
// HTML 문서의 내용을 조작하거나 업데이트할 수 있습니다.

// DOM 요소를 가져와서 내용을 변경하는 함수
function updateContent() {
    var demoElement = document.getElementById("demo");
    demoElement.innerHTML = "This content was added using JavaScript!";
}

// 위에서 정의한 함수를 호출
updateContent();

HTML 코드에서는 id demo의 정보가 없기 때문에 defer속성없이 스크립트를 실행하는 경우 스크립트 오류가 발생합니다.

하지만 defer속성을 사용했기 때문에 DOM이 구성된 후에 id 가 demo 문서 요소에 접근해 아래과 같이 정보가 추가합니다.