DocsPricingBlog
Contact Us
Log inSign up for FREE
Back to Tech Articles

CSS 로딩이 DOM 파싱 및 렌더링에 미치는 영향

Jan 28, 2025
# CSS# Frontend

Wenhao Wang

Dev Intern · Leapcell

This post is also available in English, 日本語 및 Deutsch
Cover of "CSS 로딩이 DOM 파싱 및 렌더링에 미치는 영향"

CSS 로딩이 DOM 파싱 및 렌더링에 미치는 영향: 웹 성능 최적화의 핵심 주제

CSS 로딩, 파싱 및 적용은 웹 성능 최적화에서 중요한 주제입니다. 이 과정을 이해하는 것은 페이지 로드 시간을 최적화하고 사용자 경험을 향상시키는 데 필수적입니다. 아래에서는 CSS가 DOM의 파싱 및 렌더링을 차단하는지 여부와 그 이면에 있는 메커니즘을 자세히 살펴보겠습니다.

CSS 로딩 및 DOM 파싱

DOM 파싱

  • DOM(Document Object Model) 파싱은 브라우저가 수신된 HTML 바이트 스트림을 DOM 트리로 변환하는 과정을 의미합니다.
  • HTML 문서를 파싱하는 동안 파서는 비차단 리소스(예: 비동기 스크립트)를 만나면 문서 파싱을 계속하면서 리소스를 병렬로 다운로드하려고 시도합니다.

CSS가 DOM 파싱을 차단합니까?

  • CSS 자체는 DOM 파싱을 차단하지 않습니다. 즉, 브라우저는 HTML 파싱을 계속하고 DOM 트리를 구성합니다.
  • 그러나 CSS는 DOM 렌더링 및 JavaScript 실행을 차단합니다. 이는 DOM 트리를 구성할 수 있지만 관련 CSS가 파싱될 때까지(즉, CSSOM 트리가 구축될 때까지) 브라우저가 렌더링 작업을 수행하지 않음을 의미합니다. 이는 페이지가 화면에 올바르게 표시되도록 하고 리플로우 및 다시 그리기 문제를 방지하기 위한 것입니다.

브라우저가 HTML을 파싱하여 DOM 트리를 생성할 때 CSS 파일을 병렬로 다운로드하고 CSSOM(CSS Object Model) 구성을 시작합니다. DOM 및 CSSOM의 구성은 동시에 발생하며 이는 CSS 다운로드 및 파싱이 DOM 구축을 차단하지 않음을 의미합니다.

CSSOM 트리 및 렌더링

CSSOM 트리

  • CSSOM(CSS Object Model)은 페이지의 모든 CSS 정보를 포함하는 DOM과 병렬적인 데이터 구조입니다. 브라우저는 이를 사용하여 렌더링 트리를 구성합니다.
  • 브라우저는 <link> 태그 또는 <style> 태그를 만나면 렌더링을 일시 중지하고 CSS 로딩 및 파싱을 우선시하며 CSSOM 트리를 구축합니다.

렌더링 트리 구성

  • 렌더링 트리는 DOM 트리와 CSSOM 트리를 결합한 결과이며 브라우저가 렌더링할 콘텐츠를 나타냅니다.
  • 렌더링 트리는 모든 DOM 요소에 대한 스타일 정보가 필요하므로 CSSOM 트리가 완료될 때까지 구성할 수 없습니다.

이 과정은 다이어그램으로 시각화할 수 있습니다. Image

CSS 로딩이 JavaScript를 차단하는 이유는 무엇입니까?

  1. 정확한 스타일 계산 보장: JavaScript가 CSS가 완전히 로드되고 파싱되지 않은 상태에서 DOM을 수정하거나 스타일을 계산하려고 하면 JavaScript로 검색한 스타일 정보가 부정확할 수 있습니다. 이를 방지하기 위해 브라우저는 JavaScript를 실행하기 전에 모든 관련 CSS가 로드되고 파싱되었는지 확인하므로 스크립트는 DOM 요소에 대한 최종 스타일을 검색합니다.

  2. 리플로우 및 다시 그리기 방지: CSSOM이 불완전한 상태에서 JavaScript를 실행하도록 허용하면 불완전한 스타일 정보를 기반으로 DOM을 수정할 수 있습니다. CSSOM이 구성되면 브라우저는 이미 렌더링된 요소를 리플로우하고 다시 그려야 할 수 있어 렌더링 효율성이 크게 떨어집니다.

  3. 파싱 순서에 대한 종속성: HTML 파싱 중에 브라우저는 <link rel="stylesheet" href="..."> 태그를 만나면 즉시 CSS 로딩을 시작합니다. <script> 태그(async 또는 defer 속성 없음)를 만나면 DOM 파싱을 일시 중지하고 스크립트를 실행합니다. CSS가 완전히 로드되지 않은 경우 스크립트 실행은 불완전한 스타일 정보에 따라 달라질 수 있습니다. 따라서 브라우저는 스크립트를 실행하기 전에 CSSOM이 준비될 때까지 기다립니다.

JavaScript에서 CSS를 작성하면 DOM 렌더링이 차단됩니까?

JavaScript에서 CSS 스타일을 작성하여 DOM 렌더링을 차단할지는 스타일이 적용되는 방식과 시기에 따라 달라집니다. 여기에는 브라우저의 렌더링 프로세스, 특히 JavaScript, CSS 및 DOM 간의 관계가 포함됩니다. 자세히 살펴보겠습니다.

요소 스타일을 직접 수정

JavaScript에서 DOM 요소의 style 속성을 수정하여 CSS 스타일을 직접 적용하는 경우(예: element.style.color = 'red';) 이러한 작업은 일반적으로 DOM 파싱을 차단하지 않습니다. 그러나 브라우저가 스타일을 다시 계산하고 리플로우 및 다시 그리기를 트리거해야 하므로 렌더링 프로세스를 차단할 수 있습니다.

  • 리플로우: 요소의 크기, 구조 또는 특정 속성이 변경되어 브라우저가 해당 위치와 크기를 다시 계산해야 할 때 발생합니다.
  • 다시 그리기: 요소의 시각적 모양(예: 색상 또는 테두리)이 크기나 구조에 영향을 주지 않고 변경되어 브라우저가 요소를 다시 그려야 할 때 발생합니다.

<style> 또는 <link> 태그를 동적으로 삽입

JavaScript가 <style> 또는 <link> 태그를 <head>에 동적으로 추가하면 렌더링에 영향을 줄 수 있습니다.

  • 렌더링 차단: 브라우저는 렌더링을 계속하기 전에 새로 삽입된 CSS 규칙을 파싱하기 위해 일시 중지해야 합니다. 특히 CSS 파일이 크거나 네트워크 상태가 좋지 않은 경우 렌더링이 크게 지연될 수 있습니다.
  • 성능 영향: 루프에서 <style> 태그를 삽입하는 것과 같은 반복적인 작업은 반복적인 리플로우 및 다시 그리기를 유발하여 페이지 성능에 심각한 영향을 미칠 수 있습니다.

JavaScript에서 CSS를 부적절하게 처리하면 특히 스타일이 동적으로 생성되고 적용될 때 DOM 렌더링을 차단하거나 지연시킬 수 있습니다.

결론

CSS 로딩은 DOM 파싱을 차단하지 않지만 DOM 렌더링을 차단합니다. CSS 로딩은 후속 JavaScript 실행도 차단합니다.

Leapcell은 Node.js 프로젝트 호스팅을 위한 최고의 선택입니다.

Leapcell

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

  • Node.js, Python, Go 또는 Rust로 개발하세요.

무제한 프로젝트를 무료로 배포

  • 사용량에 대해서만 비용을 지불하세요. 요청도 없고, 요금도 없습니다.

탁월한 비용 효율성

  • 유휴 요금 없이 사용한 만큼 지불합니다.
  • 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

  • 간편한 설정을 위한 직관적인 UI
  • 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합
  • 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

손쉬운 확장성과 고성능

  • 쉬운 자동 확장을 통해 높은 동시성을 처리합니다.
  • 운영 오버헤드 제로(구축에만 집중).

설명서에서 자세히 알아보세요!

Leapcell 사용해 보기

X에서 저희를 팔로우하세요: @LeapcellHQ

Share this article

HackerNews

More Posts from Leapcell

cover

Go의 http.ServeMux Is All You Need

cover

Zap: Golang 로깅의 완전한 가능성을 열다

Popular Posts