웹 렌더링·성능·상태
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
문서 객체 모델 DOM
문서 구조를 노드 트리로 표현하고 코드에서 다루도록 하는 인터페이스.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
CSS 객체 모델 CSSOM
스타일시트와 계산된 스타일 등을 객체로 다루는 인터페이스.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
레이아웃 계산 Layout / Reflow
요소의 크기와 위치를 계산하는 브라우저 렌더링 단계.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
페인트 Paint
텍스트·배경·테두리 등의 표시 내용을 그리기 명령으로 만드는 단계.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
합성 Compositing
별도 렌더링 층의 결과를 조합해 최종 화면을 만드는 과정.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
핵심 렌더링 경로 Critical Rendering Path
리소스 처리에서 초기 화면 출력까지 이어지는 주요 작업 흐름.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
클라이언트 측 렌더링 CSR
주로 브라우저에서 자바스크립트가 UI를 구성하는 방식.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
서버 측 렌더링 SSR
서버에서 생성한 HTML을 전달하는 렌더링 방식.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
정적 사이트 생성 SSG
요청 전에 페이지 HTML을 미리 생성하는 방식.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
하이드레이션 Hydration
이미 생성된 HTML에 클라이언트 동작과 상태를 연결하는 과정.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
아일랜드 아키텍처 Islands Architecture
정적 페이지 안에서 필요한 상호작용 영역만 독립적으로 활성화하는 구조.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
코드 분할 Code Splitting
애플리케이션 코드를 필요 시점별 묶음으로 나누어 로딩하는 방식.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
미사용 코드 제거 Tree Shaking
정적 분석 등을 통해 사용되지 않는 내보내기 코드를 결과물에서 제거하는 최적화.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
목록 가상화 Virtualization
화면에 필요한 일부 항목만 렌더링하여 긴 목록의 비용을 줄이는 방식.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
최대 콘텐츠 표시 시간 LCP
뷰포트 내 주요 큰 콘텐츠가 표시되는 시점을 측정하는 웹 성능 지표.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
누적 레이아웃 이동 CLS
예기치 않은 화면 요소 이동의 누적 정도를 측정하는 지표.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
상호작용 응답성 지표 INP
방문 중 상호작용 지연을 대표하도록 산정하는 웹 응답성 지표.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
성능 예산 Performance Budget
전송량·로딩 시간·프레임 시간 등에 미리 설정하는 허용 범위.
디자인 구현이 실제 브라우저에서 빠르고 일관되게 작동하도록 구조를 정한다.
프레임워크 이름과 렌더링 전략은 별개다. 측정 조건 없이 성능 우위를 단정하지 않는다.
Web Rendering, Performance & State
Open an entry for its visual reference, comparisons and source-language text.
DOM 문서 객체 모델
An interface representing a document as a node tree that code can inspect and modify.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
CSSOM CSS 객체 모델
An interface representing stylesheets and computed styling as objects.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Layout / Reflow 레이아웃 계산
The browser-rendering stage that calculates element sizes and positions.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Paint 페인트
The stage that produces drawing instructions for text, backgrounds, borders, and other visible content.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Compositing 합성
Combining separately rendered layers into the final displayed frame.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Critical Rendering Path 핵심 렌더링 경로
The sequence of key operations from resource processing to the initial screen rendering.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
CSR 클라이언트 측 렌더링
A rendering approach in which JavaScript primarily builds the interface in the browser.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
SSR 서버 측 렌더링
A rendering approach delivering HTML generated on the server.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
SSG 정적 사이트 생성
Generating page HTML before a request is made.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Hydration 하이드레이션
Connecting client-side behavior and state to already generated HTML.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Islands Architecture 아일랜드 아키텍처
An architecture independently activating only interactive regions within a largely static page.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Code Splitting 코드 분할
Dividing application code into bundles loaded when needed.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Tree Shaking 미사용 코드 제거
An optimization removing unused exports from a build through static analysis or related techniques.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Virtualization 목록 가상화
Rendering only the items needed for the current view to reduce the cost of long lists.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
LCP 최대 콘텐츠 표시 시간
A web performance metric measuring when the largest significant viewport content is rendered.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
CLS 누적 레이아웃 이동
A metric measuring accumulated unexpected shifts in visible page elements.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
INP 상호작용 응답성 지표
A web responsiveness metric representing interaction latency during a visit.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.
Performance Budget 성능 예산
A predefined allowance for metrics such as transfer size, load time, or frame time.
Structuring a design so it runs quickly and consistently in actual browsers.
Framework names and rendering strategies are separate concepts. Do not claim performance superiority without specifying measurement conditions.