HTML 렌더링 중 JavaScript가 실행되면 왜 렌더링이 멈출까?

안녕하세요 웹 YB 곽서연입니다! 

 

웹 페이지가 사용자에게 보여지기까지는 여러 단계의 복잡한 과정을 거칩니다. 그 중 하나가 바로 HTML 파싱과 렌더링, 그리고 JavaScript 실행입니다. 그런데 종종, JavaScript가 실행되는 순간 렌더링이 일시적으로 멈춘다는 현상이 발생합니다. 왜 이런 일이 일어나는 걸까요?

 

📌 브라우저의 렌더링 과정

 

브라우저는 웹 페이지를 불러올 때 다음과 같은 과정을 거칩니다:

1. HTML 파싱 → DOM(Document Object Model) 생성
2. CSS 파싱 → CSSOM(CSS Object Model) 생성
3. DOM + CSSOM 결합 → 렌더 트리(Render Tree) 생성
4. 레이아웃 계산 → 각 요소의 위치와 크기 계산
5. 페인팅 → 화면에 실제로 그리기

📌 JavaScript는 왜 렌더링을 멈추게 할까?

 

HTML을 파싱하던 중 <script> 태그를 만나면 브라우저는 잠시 멈추고 JavaScript를 다운로드하고 실행합니다.
왜냐하면, JavaScript는 DOM을 조작할 수 있기 때문입니다

<p>첫 번째 문장</p>
<script>
  document.write("<p>두 번째 문장</p>");
</script>
<p>세 번째 문장</p>

 

위 스크립트는 DOM 구조를 바꿉니다. 따라서 브라우저는 세 번째 문장을 렌더링하기 전에 JavaScript 실행 결과를 알아야 합니다. 즉, 브라우저는 DOM 파싱과 JavaScript 실행을 동시에 할 수 없고, 반드시 순차적으로 처리해야 합니다.

이처럼 브라우저는 안정성과 정확성을 위해 HTML 파싱을 잠시 멈추고 JavaScript 실행을 완료한 후 다시 파싱을 이어갑니다.

 

📌 외부 스크립트는 더 큰 문제?

 

<script src="main.js"></script>

브라우저는 이 파일을 네트워크에서 다운로드한 후 실행합니다. 다운로드 시간이 길어지면, 그만큼 렌더링도 지연됩니다.

📌 해결 방법

1. defer 속성

<script src="main.js" defer></script>

• HTML 파싱을 멈추지 않고 JavaScript를 다운로드함
• DOM 파싱이 끝난 후 실행됨
• 스크립트 간 실행 순서 보장

2. async 속성

<script src="main.js" async></script>

• HTML 파싱과 병렬로 다운로드
• 다운로드가 끝나는 즉시 실행됨
• 여러 스크립트 간 실행 순서가 보장되지 않음

속성	병렬 다운로드	실행 시점	순서 보장
				속성 없는 경우	✖	즉시 (파싱 중단)	O
defer	✔	파싱 완료 후	O
async	✔	다운로드 후 즉시	✖

정리

JavaScript는 DOM 구조를 바꾸기 때문에, 브라우저는 HTML 파싱을 멈추고 JavaScript를 먼저 실행합니다. 이로 인해 렌더링이 지연될 수 있으며, 특히 외부 스크립트는 네트워크 속도에 따라 큰 영향을 줍니다. 그렇기 때문에 defer나 async 속성을 적절히 활용하면 렌더링 속도를 개선할 수 있습니다!

 

읽어주셔서 감사합니다😆