이 측정은 먼저 두 질문에 답합니다. 문서 페이지가 전달한 CSS 중 얼마나 페이지에 일치하는지, 같은 UI에서 Master CSS와 Tailwind CSS가 각각 얼마나 CSS를 생성하는지입니다. 기술 부록에서는 빌드 시간, CSS 규모에 대한 Chromium 반응, 각 Master CSS 렌더링 모드 비용을 다룹니다. 다른 앱에 결과를 적용하기 전에 각 절의 조건과 한계를 확인하세요.
스냅샷은 2026년 11월 4일 같은 기기(Apple M5 Max, macOS)에서 Chromium 156으로 기록했습니다. Master CSS 패키지는 리비전 add10eec6에서 빌드했습니다. 브라우저 수명 주기 스냅샷은 같은 날 앞서 기록한 3fc239c6c를 사용합니다. add10eec6는 컴파일러와 정적 빌드 호스트를 변경하며 런타임, 프리셋, 엔진은 변경하지 않습니다. Master CSS 문서는 같은 체크아웃의 프로덕션 빌드에서 측정했고 다른 문서 사이트는 같은 날 공개 페이지를 가져왔습니다.
지표
값
세부 정보
문서 페이지 CSS
23.1 / 28.9 kB
Master CSS 사이트, Brotli: 표시 페이지 / 5페이지 중앙값.
일치한 스타일 규칙
55%
Master CSS 사이트의 5페이지 중앙값으로 7개 사이트 중 가장 높음.
같은 UI의 생성 CSS
1.9 / 2.6 kB
Master CSS / Tailwind CSS, docs 픽스처, Brotli.
콜드 프로덕션 명령
206 / 52 ms
Master CSS / Tailwind CSS, docs 픽스처, 시작 포함.
런타임 다운로드
48.7 kB
런타임 JS 33.3 kB + 컴파일된 프로그램 15.4 kB, Brotli.
점진적 초기 로드
2 requests
HTML과 런타임 JS. 프로그램은 클래스가 필요로 할 때만 로드.
로드 후 정확성
54 / 54
계산 스타일 및 정리 검사를 통과한 상호작용.
장시간 세션 스타일 작업
5.0 / 12.2 s
Master CSS 런타임 / Tailwind CSS 정적, 각 5분 한 번 실행.
주요 결과는 커밋된 스냅샷에서 계산했습니다. 아래 각 절에 결과별 조건과 전체 데이터를 제공합니다.
차트는 각 사이트의 표시 페이지에서 인라인 style 본문과 연결 스타일시트를 합산합니다. Brotli 보기에서는 각 본문을 따로 압축합니다. 한 페이지가 사이트를 잘못 대표할 수 있어 표에는 사이트마다 문서 페이지 4개를 추가하고 범위를 표시합니다.
사이트
표시 페이지(Brotli)
5페이지 중앙값(Brotli)
5페이지 범위(Brotli)
5페이지 중앙값(원본)
일치한 스타일 규칙, 중앙값
일치한 스타일 규칙, 범위
Angular
23.3 kB
23.3 kB
23.2 kB – 24.5 kB
151.8 kB
49%
43% – 53%
Material UI
27.1 kB
27.6 kB
26.9 kB – 36.2 kB
292.2 kB
40%
38% – 48%
Master CSS
23.1 kB
28.9 kB
23.1 kB – 34.2 kB
130.6 kB
55%
46% – 60%
Bootstrap
32.6 kB
32.6 kB
32.6 kB – 32.6 kB
293.9 kB
13%
11% – 13%
Vue.js
33.4 kB
33.4 kB
33.4 kB – 33.4 kB
186.3 kB
26%
22% – 28%
Tailwind CSS
58.4 kB
58.4 kB
58.4 kB – 58.4 kB
657.7 kB
8%
7% – 9%
Next.js
61.4 kB
61.4 kB
61.4 kB – 61.4 kB
479.9 kB
13%
11% – 14%
사이트마다 문서 페이지 5개를 측정합니다. 일치한 스타일 규칙은 1280 × 800 뷰포트에서 로드된 페이지 요소에 선택자가 일치하는 규칙입니다.
지표
값
세부 정보
페이지 수
74
사이트맵에 나열된 모든 페이지
CSS, Brotli
29.7 kB (23.1 kB – 34.4 kB)
중앙값(최소 – 최대)
CSS, 원본
133.7 kB (110.4 kB – 156.3 kB)
중앙값(최소 – 최대)
일치한 스타일 규칙
51% (38% – 60%)
중앙값(최소 – 최대)
Master CSS 사이트맵에 나열된 모든 문서 페이지를 같은 방식으로 측정합니다.
Master CSS 문서 페이지는 두 종류의 CSS를 결합합니다. 페이지별 style#master-css 본문은 해당 페이지가 쓰는 유틸리티를 담으며 표시된 페이지에서는 1 kB 미만입니다. 연결 스타일시트는 사이트 디자인 시스템 컴포넌트, 프리셋 기반 스타일, 참조 토큰을 담고 대부분의 바이트를 차지합니다. 각 스타일시트는 컴포넌트에 속하며 전체가 전달되므로 컴포넌트가 많은 페이지는 더 많은 파일을 연결하고 총량도 페이지마다 다릅니다. 닫힌 검색 대화상자나 일부 글 컴포넌트처럼 컴포넌트 일부만 렌더링해도 모든 규칙을 받습니다. 이것이 일치하지 않는 규칙 대부분의 출처입니다. 다른 사이트 중 일부는 모든 페이지에 같은 스타일시트를 전달합니다.
일치 규칙은 크기와 별개로 페이지 CSS가 해당 페이지에 얼마나 정확히 맞는지 측정합니다. 상태 의사 클래스와 의사 요소를 제외한 선택자가 로드 후 요소에 일치하면 계산합니다. 다른 뷰포트, 색상 모드, 이후 상호작용 규칙도 대상 요소가 없을 때만 불일치로 계산합니다. 이 비율은 CSS 프레임워크만이 아닌 각 사이트 스타일시트의 특성입니다.
한계: 수집된 CSS 본문 크기이며 브라우저 전송량이나 시간 측정이 아닙니다. 수집기는 CSS import 그래프를 따라가거나 JavaScript 삽입 스타일을 계산하지 않습니다. 전체 응답 압축, 캐시 재사용, 헤더, CDN 동작, 글꼴, 이미지, 앱 런타임 작업은 비교에서 제외됩니다. 각 사이트 CSS는 자체 설계와 빌드 선택도 반영하므로 이 표본은 CSS 프레임워크 비용만 분리하지 않습니다. 아래 정적 픽스처가 같은 UI에서 프레임워크를 비교합니다.
측정한 각 픽스처와 구성의 원본, gzip, brotli CSS 바이트 및 CSS 파일 수입니다.
픽스처
변형
규칙 수
선택자 수
선언 수
사용자 지정 속성 수
앳룰 수
레이어 블록 수
레이어 없는 규칙 수
결합자 수
최대 명시도
최대 복잡도
Minimal
Master CSS static CLI
86
138
134
21
6
4
1
0
20
2
Minimal
Master CSS static Vite
86
138
134
21
6
4
1
0
20
2
Minimal
Tailwind CSS CLI
86
131
174
41
13
4
1
3
10
9
Minimal
Tailwind CSS Vite
99
132
199
41
12
4
1
3
10
9
Docs
Master CSS static CLI
102
154
153
24
7
4
1
0
20
2
Docs
Master CSS static Vite
102
154
153
24
7
4
1
0
20
2
Docs
Tailwind CSS CLI
102
147
226
56
24
4
1
3
10
9
Docs
Tailwind CSS Vite
116
149
251
56
23
4
1
3
10
9
Dashboard
Master CSS static CLI
108
160
161
27
6
4
1
0
20
2
Dashboard
Master CSS static Vite
108
160
161
27
6
4
1
0
20
2
Dashboard
Tailwind CSS CLI
105
150
195
42
13
4
1
3
20
9
Dashboard
Tailwind CSS Vite
118
151
220
42
12
4
1
3
20
9
Stress CSS
Master CSS static CLI
301
353
352
25
6
4
1
0
20
2
Stress CSS
Master CSS static Vite
301
353
352
25
6
4
1
0
20
2
Stress CSS
Tailwind CSS CLI
300
345
369
28
11
4
1
3
10
9
Stress CSS
Tailwind CSS Vite
312
346
393
28
10
4
1
3
10
9
생성 CSS에서 파싱한 규칙, 선택자, 선언, at-rule, 레이어, 선택자 형태 데이터입니다.
해석: CSS 구조 지표는 브라우저 비용을 논하기 전에 바이트 수가 다른 이유를 설명합니다. Tailwind CSS와 Master CSS 픽스처는 같은 클래스 문자열이 아닌 동등한 렌더링 UI를 목표로 합니다.
측정한 모든 구성은 CSS 파일 하나를 출력합니다. Master CSS 정적 빌드는 프리셋을 포함해 진입점이 가져온 스타일시트를 인라인으로 합치므로 Tailwind CSS와 마찬가지로 한 요청으로 생성 CSS를 받습니다. 외부 import, 네임스페이스, 자체 import를 가진 파일의 조건부 import를 유지하는 스타일시트는 별도 파일로 남지만 이 픽스처에는 해당 경우가 없습니다.
한계: 브라우저 파싱, 스타일 재계산, 레이아웃, 페인트, 상호작용 비용, watch 모드, HMR은 측정하지 않습니다. 픽스처는 유틸리티 클래스만 사용합니다. 페이지 CSS 표본은 직접 작성한 컴포넌트 CSS가 얼마나 더해질 수 있는지 보여 줍니다.
이전 스냅샷은 2026년 7월 1일의 리비전을 측정했으며 이후 엔진이 Rust로 이동하고 클래스 구문도 바뀌었습니다. 코드 변경을 기기, 브라우저, 벤치마크 하네스 영향과 분리하려고 7월 리비전 cd5a3972a를 다시 빌드하고 해당 버전의 러너를 현재 측정과 같은 기기 및 Chromium 빌드에서 다시 실행했습니다. 두 체크아웃의 프로덕션 빌드를 세 차례 교대로 실행해 기기 백그라운드 부하가 양쪽에 비슷하게 영향을 주게 했습니다.
재실행은 7월 정적 CSS 출력을 바이트 단위로 재현했으므로 이전 수치는 당시 리비전에 유효했습니다. 현재 픽스처는 현행 클래스 구문으로 같은 렌더링 값을 나타냅니다. 모든 클래스가 CSS를 생성하고 CLI의 --strict 모드를 통과합니다.
같은 기기와 Chromium 빌드에서 각 리비전의 자체 러너로 얻은 중앙값입니다. 양쪽 프로덕션 빌드는 같은 Node.js 버전을 사용했으며 각 빌드 중앙값은 세 차례 교대 실행의 명령 15개를 합쳐 계산했습니다.
이 기기에서 현재 리비전은 브라우저 런타임을 더 빨리 시작하고 더 적은 데이터로 점진적 페이지를 하이드레이션합니다. 반면 더 큰 런타임을 다운로드하고 콜드 프로덕션 명령은 더 오래 걸립니다. docs 픽스처 생성 CSS는 약 5% 늘었고 7월과 같이 파일 하나로 도착합니다. 각 체크아웃은 자체 Tailwind CSS와 Vite 버전을 설치하므로 Tailwind CSS 대조군에는 업그레이드와 실행 간 잡음도 반영됩니다.
두 리비전 모두 Tailwind CSS를 포함한 각 모드의 상호작용 준비 시간은 거의 같습니다. Master CSS 작업이 아닌 하네스의 프레임 대기가 하한을 정하므로 값은 약 한 프레임(17 ms) 간격으로 움직입니다. 7월 리비전에서 더 낮은 Tailwind CSS 값도 그 한 단계 차이입니다.
전달의 질문은 더 적은 CSS 규칙을 로드해 절약한 브라우저 작업이 런타임 규칙 생성 비용을 상쇄할 수 있는지입니다. 초기 로드, 이후 상호작용, 장시간 세션 정리를 포함한 전체 페이지 수명 주기를 비교하세요.
런타임과 점진적 렌더링은 관찰한 클래스에서 규칙을 생성하는 JavaScript 작업을 더합니다. 클래스 집합이 정적 소스에서 얻은 집합보다 작으면 초기 CSS와 CSSOM 규칙량을 줄일 수 있습니다. 이 감소가 시작 및 변경 작업을 상쇄하는지는 워크로드에 달려 있습니다. Tailwind CSS는 런타임 없는 정적 CSS 대조군으로 유용합니다. 런타임 동등 구현은 없지만 이 절충에서 큰 정적 CSS 쪽을 대표합니다.
현재 근거는 방향을 보여 주는 결과로 읽어야 합니다. 측정 픽스처에서 런타임/점진적 모드가 CSSOM·규칙량과 스타일 재계산을 충분히 줄여 런타임 시작, 관찰, 변경 작업을 상쇄한다면 가설을 뒷받침할 수 있습니다. 모든 앱이 더 빨라진다는 뜻은 아닙니다.
이 테스트 모음은 선택자 매칭을 안정적인 Chromium 지표로 직접 측정하지 않습니다. 전달된 선택자, CSSOM 규칙 수, 런타임 생성 규칙 수, 추적에서 얻은 스타일 재계산으로 추론합니다.
검증 질문: Master CSS 시작, 통합, 추출, 컴파일러의 어떤 세부 단계가 전체 명령 비용을 설명하는가?
이 스냅샷은 startup-diagnostics, build-diagnostics, compiler-diagnostics, extraction-diagnostics를 결합합니다. Master CSS 빌드 경로를 설명하며 프레임워크 간 프로덕션 벤치마크가 아닙니다.
지표
값
세부 정보
픽스처 수
4
minimal, docs, dashboard, stress-css 진단 픽스처
소스 보고서
4
시작, 빌드, 컴파일러, 추출 진단
환경
Apple M5 Max, v26.3.0
darwin 27.0.0 arm64, CPU 18개
CLI 명령과 추출 비교
216.5 ms / 52.2 ms
`docs` 픽스처 전체 명령 측정 범위와 CLI CSS 추출 비교
Vite 오버헤드와 스캐너 초기화 비교
194.7 ms / 6.06 ms 확인 필요
`docs` 픽스처 Master Vite 명령 오버헤드와 스캐너 초기화 비교
등록과 조합
47.3 ms / 53.4 ms
`docs` 픽스처 스타일시트 진입점 등록과 공개 API를 이용한 첫 전체 조합 비교
Master CSS 빌드 경로 진단을 정리한 스냅샷입니다.
CLI 경로
docs 픽스처 중앙값
전체 CLI 명령표본 3개
CLI 시작 프로브표본 3개
스캐너 가져오기 프로브표본 3개
소스 스캔표본 3개
CSS 추출표본 3개
Vite 경로
docs 픽스처 중앙값
Master Vite 명령 오버헤드표본 3개
@master/css-vite 가져오기 프로브표본 3개
Vite 코어 모듈 가져오기 프로브표본 3개
Vite 스캐너 초기화표본 3개
Vite 번들 CSS 추출표본 3개
스타일시트 파이프라인
docs 픽스처의 개별 공개 API 작업 중앙값
스타일시트 등록표본 3개
첫 전체 조합표본 3개
반복 전체 조합표본 3개
네이티브 CSS 없는 조합표본 3개
생성 CSS 없는 조합표본 3개
docs 픽스처의 진단 중앙값입니다. 시작 프로브는 방향을 보여 주며 합산 가능한 플레임 그래프가 아닙니다.
픽스처
CLI 명령
CLI 추출
Vite 오버헤드
Vite 가져오기
Vite 스캐너
등록
첫 조합
파이프라인 합계
최종 CSS
Minimal
227.1 ms
54 ms
211.9 ms
28.3 ms
6.46 ms
48.5 ms
53.4 ms
217.2 ms
5.6 kB
Docs
216.5 ms
52.2 ms
194.7 ms
27.1 ms
6.06 ms
47.3 ms
53.4 ms
218.9 ms
6.4 kB
Dashboard
211.1 ms
55.9 ms
204.5 ms
26.5 ms
6 ms
47.3 ms
56.1 ms
230 ms
6.7 kB
Stress CSS
220.8 ms
61 ms
206.3 ms
26.7 ms
6.02 ms
47.4 ms
68.6 ms
263.1 ms
12.6 kB
측정한 모든 픽스처의 전체 빌드 경로 진단 스냅샷 데이터입니다.
해석: 일반 픽스처 명령에서 모듈 import와 소스 스캔은 수 밀리초를 차지합니다. 스타일시트 진입점 등록과 출력 조합은 각각 수십 밀리초이며 같은 구성의 반복 조합도 첫 실행의 약 5분의 3이 듭니다. 한 CLI 실행의 CPU 프로파일(node --cpu-prof)에서는 명령에서 가장 큰 비중인 약 3분의 1이 가져온 프리셋 스타일시트 그래프 컴파일에 사용된 것으로 나타납니다. 이 작업은 픽스처 클래스와 무관하므로 작은 픽스처도 큰 픽스처와 거의 같은 고정 비용을 지불합니다.
한계: 진단 프로브는 서로 다른 범위와 세부 단계를 측정합니다. 하나의 프로덕션 추적인 것처럼 시간을 합산하지 마세요.
페이로드 차트는 전체 HTML 응답과 초기 로드에서 요청한 각 외부 에셋을 한 번씩 계산합니다. 인라인 CSS와 삽입된 hydration 매니페스트는 이미 HTML 안에 있으므로 별도 구간이 아닙니다. 빈 에셋 필드는 압축 컨테이너 바이트를 총량에 더하지 않습니다.
Master CSS 정적요청 2개
HTML2 kB
외부 CSS1.9 kB
Master CSS 런타임요청 3개
HTML2.2 kB
런타임 JS33.3 kB
런타임 프로그램15.4 kB
Master CSS 점진적요청 2개
HTML3.5 kB
런타임 JS33.3 kB
Tailwind CSS 정적요청 2개
HTML1.9 kB
외부 CSS2.6 kB
docs 픽스처의 기록된 응답 에셋을 각각 Brotli로 압축했습니다. 모든 막대는 0부터 최대 합계까지 같은 척도를 사용하고 구간은 각 에셋의 기여를 보여 줍니다.
이 총량은 기록된 에셋 필드에서 추정한 값이며 실측 네트워크 전송 크기가 아닙니다. 헤더와 전송 오버헤드를 제외하고 각 페이지 HTML에는 벤치마크 하네스 스크립트가 포함됩니다. 상세 표는 개별 압축한 인라인 CSS와 hydration 조각을 진단용으로 유지합니다. 이 열을 응답 총량에 더하면 내용이 이중 계산됩니다.
탐색부터 준비 완료까지
중앙값
Master CSS 정적표본 3개
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
Tailwind CSS 정적표본 3개
스타일 재계산
중앙값
Master CSS 정적표본 3개
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
Tailwind CSS 정적표본 3개
레이아웃
중앙값
Master CSS 정적표본 3개
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
Tailwind CSS 정적표본 3개
페인트
중앙값
Master CSS 정적표본 3개
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
Tailwind CSS 정적표본 3개
docs 픽스처의 로컬 Chromium 로드 시간 중앙값입니다.
런타임 시작
중앙값
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
런타임 관찰
중앙값
Master CSS 런타임표본 3개
Master CSS 점진적표본 3개
Master 런타임 및 점진적 모드의 런타임 시작과 관찰 중앙값입니다.
픽스처
모드
응답 에셋
HTML
외부 CSS
인라인 CSS(HTML 내부)
런타임 JS
런타임 프로그램
하이드레이션(HTML 내부)
규칙 수
선언 수
탐색 준비 완료
스타일 재계산
레이아웃
페인트
런타임 시작
런타임 관찰
점진적 CSS 채택됨
Minimal
Master CSS static
3.1 kB
1.4 kB
1.7 kB
0 kB
0 kB
0 kB
0 kB
86
134
24.6 ms
0.8 ms
5.4 ms
0.8 ms
0 ms
0 ms
0
Minimal
Master CSS runtime
50.4 kB
1.7 kB
0 kB
0 kB
33.3 kB
15.4 kB
0 kB
0
0
39.6 ms
0.6 ms
3 ms
0.4 ms
8.9 ms
4.2 ms
0
Minimal
Master CSS progressive
36 kB
2.7 kB
0 kB
0.8 kB
33.3 kB
0 kB
0.4 kB
49
67
39.8 ms
0.5 ms
2.8 ms
0.4 ms
4.2 ms
0.3 ms
1
Minimal
Tailwind CSS static
3.7 kB
1.4 kB
2.3 kB
0 kB
0 kB
0 kB
0 kB
86
174
23.1 ms
0.7 ms
4.6 ms
0.6 ms
0 ms
0 ms
0
Docs
Master CSS static
3.9 kB
2 kB
1.9 kB
0 kB
0 kB
0 kB
0 kB
102
153
25 ms
0.9 ms
6.9 ms
1.3 ms
0 ms
0 ms
0
Docs
Master CSS runtime
50.9 kB
2.2 kB
0 kB
0 kB
33.3 kB
15.4 kB
0 kB
0
0
39.2 ms
0.7 ms
3.7 ms
0.7 ms
8.7 ms
4.5 ms
0
Docs
Master CSS progressive
36.7 kB
3.5 kB
0 kB
1 kB
33.3 kB
0 kB
0.5 kB
65
86
39 ms
0.6 ms
3.6 ms
0.7 ms
5.4 ms
0.3 ms
1
Docs
Tailwind CSS static
4.5 kB
1.9 kB
2.6 kB
0 kB
0 kB
0 kB
0 kB
102
226
25.8 ms
1 ms
7.7 ms
1.2 ms
0 ms
0 ms
0
Dashboard
Master CSS static
3.8 kB
1.9 kB
1.9 kB
0 kB
0 kB
0 kB
0 kB
108
161
23.7 ms
8 ms
2.7 ms
1.4 ms
0 ms
0 ms
0
Dashboard
Master CSS runtime
50.9 kB
2.2 kB
0 kB
0 kB
33.3 kB
15.4 kB
0 kB
0
0
40.7 ms
5.8 ms
2 ms
0.9 ms
9.1 ms
4.6 ms
0
Dashboard
Master CSS progressive
36.7 kB
3.4 kB
0 kB
1 kB
33.3 kB
0 kB
0.5 kB
71
94
42.4 ms
5.4 ms
1.8 ms
0.8 ms
6.2 ms
0.4 ms
1
Dashboard
Tailwind CSS static
4.3 kB
1.9 kB
2.4 kB
0 kB
0 kB
0 kB
0 kB
105
195
23.1 ms
9 ms
2.7 ms
1.2 ms
0 ms
0 ms
0
Stress CSS
Master CSS static
4.3 kB
2.2 kB
2 kB
0 kB
0 kB
0 kB
0 kB
301
352
24.1 ms
1.3 ms
5.9 ms
1.1 ms
0 ms
0 ms
0
Stress CSS
Master CSS runtime
51.2 kB
2.5 kB
0 kB
0 kB
33.3 kB
15.4 kB
0 kB
0
0
39.4 ms
1.1 ms
3.6 ms
0.6 ms
12.6 ms
7.9 ms
0
Stress CSS
Master CSS progressive
37.4 kB
4.1 kB
0 kB
1.1 kB
33.3 kB
0 kB
0.5 kB
264
285
39.3 ms
1 ms
3.6 ms
0.7 ms
6.1 ms
0.7 ms
1
Stress CSS
Tailwind CSS static
4.8 kB
2.3 kB
2.6 kB
0 kB
0 kB
0 kB
0 kB
300
369
23.3 ms
1.9 ms
5.8 ms
1 ms
0 ms
0 ms
0
측정한 모든 픽스처와 모드의 전체 전달 모드 스냅샷 데이터입니다.
해석: 런타임 모드는 생성 CSS를 전달하지 않지만 페이지에 스타일이 적용되기 전에 브라우저 런타임과 컴파일된 기본 프로그램을 가져옵니다. 점진적 모드는 HTML의 서버/빌드 CSS로 시작하고 런타임이 이를 채택합니다. hydration 데이터에 없는 클래스가 있을 때만 프로그램을 가져오며 이번 초기 로드에서는 그런 경우가 없었습니다.
한계: 로컬 픽스처의 초기 로드만 측정합니다. 로드 후 변경은 상호작용 테스트 모음에서 다룹니다. Master 정적과 Tailwind 정적은 같은 클래스 문자열이 아닌 동등한 픽스처 의도로 빌드한 CLI 생성 스타일시트를 하나씩 불러옵니다. 런타임과 점진적 페이지는 독립적인 전역 런타임 번들을 로드합니다. 번들러 통합은 더 작은 점진적 진입점을 로드할 수 있으며 런타임 크기 계약에서 측정합니다. 모드별 시작은 렌더링 모드를 참고하세요.
해석: 런타임과 점진적 모드는 사용자에게 보이는 변경 후 준비 상태와 런타임 스타일시트 작업의 두 층으로 읽어야 합니다. 준비 시간은 하네스의 프레임 대기를 포함하고 모드 간 거의 같으므로 모드가 추가하는 비용은 런타임 변경 작업과 스타일 재계산을 비교하세요. 규칙 변화량은 런타임 공개 스냅샷의 규칙을 셉니다. 점진적 페이지가 엔진을 지연할 때 스냅샷에는 규칙이 없습니다. hydration 데이터에 없는 첫 클래스가 엔진을 시작하면 서버 렌더링 규칙을 상태로 채택하므로 해당 상호작용 변화량에는 채택한 규칙도 포함됩니다. CSSOM 비용은 런타임 변경 작업과 스타일 재계산으로 비교하세요.
한계: 라우트 전환, HMR, 개발 흐름, CDN 동작, Firefox, WebKit, 공개 실제 앱의 변동은 측정하지 않습니다.
수명 주기 테스트는 Master CSS 정적, 런타임, 점진적과 Tailwind CSS 정적 대조군을 비교합니다. 아래 차트는 5분 장시간 세션 시나리오를 사용합니다. 각 모드는 실측 실행이 한 번뿐입니다. 표본 하나의 중앙값은 그 단일 관찰이며 반복 가능성의 근거가 아닙니다.
표의 경과 시간은 전체 스크립트 세션과 마지막 안정화 프레임을 포함합니다. 원본 지표 이름은 inp-style-interaction-ms이지만 이 시나리오에서는 설계상 약 5분입니다. 개별 입력 지연이나 Web Vitals INP를 측정하지 않습니다.
지표
값
세부 정보
스냅샷 변형 수
64
4개 모드의 시나리오 7개
근거가 있는 모드 수
4/4 양호
구간별 5분 장시간 세션 보고서
브라우저
Chromium 156.0.8078.4
로컬 추적 측정에 사용한 헤드리스 브라우저
장시간 세션 표본 수
1
커밋된 근거의 모드별 실측 5분 실행 횟수
계산 스타일 검사
4/4 양호
computed-style-valid = 1인 5분 근거 변형
점진적 CSS 채택
1/1 양호
Master 점진적 장시간 세션 근거 변형
브라우저 수명 주기 근거의 범위와 정확성 검사입니다.
스타일 재계산
5분 실행 · n=1
Master CSS 정적
Master CSS 런타임
Master CSS 점진적
Tailwind CSS 정적
레이아웃
5분 실행 · n=1
Master CSS 정적
Master CSS 런타임
Master CSS 점진적
Tailwind CSS 정적
페인트
5분 실행 · n=1
Master CSS 정적
Master CSS 런타임
Master CSS 점진적
Tailwind CSS 정적
긴 작업 수
5분 실행 · n=1
Master CSS 정적
Master CSS 런타임
Master CSS 점진적
Tailwind CSS 정적
CSSOM 규칙 수
5분 실행 · n=1
Master CSS 정적
Master CSS 런타임
Master CSS 점진적
Tailwind CSS 정적
런타임 변경 작업
5분 실행 · n=1
Master CSS 정적규칙 0개
Master CSS 런타임규칙 78개
Master CSS 점진적규칙 78개
Tailwind CSS 정적규칙 0개
모드별 단일 5분 실행에서 관찰한 브라우저 렌더링과 런타임 작업입니다.
모드
세션 경과 시간
스타일 재계산
레이아웃
페인트
긴 작업 수
CSSOM 규칙 수
런타임 규칙 수
런타임 변경 처리
JS 힙
계산 스타일
점진적 CSS 채택됨
표본 수
Master CSS static
300,115.9 ms
6,644 ms
1,307.4 ms
5,760.7 ms
0
98
0
0 ms
1,796.3 kB
1
0
1
Master CSS runtime
300,102.5 ms
5,047.7 ms
1,119 ms
4,698.8 ms
1
59
78
211.3 ms
5,358 kB
1
0
1
Master CSS progressive
300,119.9 ms
8,913.1 ms
1,659.5 ms
7,194.2 ms
0
59
78
312.6 ms
4,808.1 kB
1
1
1
Tailwind CSS static
300,117.2 ms
12,181.7 ms
1,718.1 ms
6,998.8 ms
0
112
0
0 ms
1,479.7 kB
1
0
1
모든 모드의 전체 5분 장시간 세션 근거입니다.
해석: 전체 스타일 재계산과 각 모드가 더하는 런타임 변경 작업을 비교하세요. 모드당 한 번 실행으로는 안정적인 속도 향상을 입증할 수 없습니다. 레이아웃, 페인트, 반응성, 전체 성능을 결론 내리기 전에 같은 기기에서 반복 실행을 비교하세요.
한계: Chromium이 안정적인 추적 지표를 제공하지 않는 한 선택자 매칭 시간은 CSSOM·규칙량과 스타일 재계산에서 추론한 값입니다. CSSOM 메모리와 GC 압력은 같은 브라우저 버전에서 재현할 만큼 수집 방법이 안정적일 때만 보고합니다.
차트는 benchmarks/**/snapshot.json과 benchmarks/browser-lifecycle/long-session-evidence.json에 커밋된 2026년 11월 4일 스냅샷을 읽습니다. 픽스처, 지표 계열, 게시 규칙, 기록 명령, 검증 단계는 벤치마크 README에 있습니다. 결과 재현에는 일치하는 소스 리비전과 잠금 파일이 필요하며 현재 패키지 설치만으로는 부족합니다.
Master CSSMaster CSS 0.8 kB + 기타 인라인 CSS 1.0 kB + 외부 CSS 108.6 kB
Angular1.4× Master CSS
Vue.js1.7× Master CSS
Material UI2.5× Master CSS
Bootstrap2.7× Master CSS
Next.js4.3× Master CSS
Tailwind CSS6.0× Master CSS