브라우저 렌더링 중 스크립트 태그를 만날 때 파싱이 중단되는 문제와 해결

Posted a year Updated a year

By 베짱이가 되고싶은 개미。

렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 JavaScript를 만나면 DOM 생성을 임시 중단합니다. DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성합니다.

DOM을 생성해 나가다가 스크립트 태그를 만날 때 파싱이 중단되는 문제를 해결하는 몇 가지 방법 중 비동기적으로 스크립트 로드하는 방법을 설명하려 합니다. async나 defer 속성을 사용하여 스크립트를 비동기적으로 로드할 수 있습니다. 이를 통해 스크립트 로드가 병렬적으로 이루어지므로 페이지 파싱이 중단되지 않습니다.

📝 HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Async vs Defer</title>
</head>
  <body>
    <h1>Async vs Defer 예제>/h1>
    <script src="script.js" async>/script>
    <script src="script.js" defer>/script>
  </body>
</html>

📝 script.js

console.log("이 부분은 스크립트가 실행되어야 하는 내용입니다.");

여기서 async와 defer 속성을 가진

📝 async 속성

브라우저는 async 속성을 가진 스크립트를 만나면 HTML 파싱과 함께 스크립트 파일의 다운로드를 동시에 시작합니다. 스크립트 파일이 다운로드되고 실행될 준비가 되면, HTML 파싱은 멈추고 스크립트가 실행됩니다. 따라서 console.log가 실행될 때까지 HTML 파싱은 멈추게 됩니다.

📝 defer 속성

브라우저는 defer 속성을 가진 스크립트를 만나면 HTML 파싱을 계속하면서 스크립트 파일의 다운로드를 시작합니다. 스크립트 파일은 DOM 생성이 완료된 직후에 실행됩니다. 즉, DOMContentLoaded 이벤트가 발생한 후에 실행됩니다. 따라서 console.log가 실행될 때까지 HTML 파싱은 멈추지 않습니다.

이러한 방법 중에서 적합한 방법을 선택하여 사용하면 됩니다. 일반적으로 비동기 로드나 스크립트 위치 이동이 가장 효과적인 해결책일 수 있습니다.