[G1-Sync] Manual knowledge update
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-CHRP-001
|
||||
id: [[P-Reinforce]]-AUTO-CHRP-001
|
||||
category: "10_Wiki/💡 Topics/AI"
|
||||
confidence_score: 0.96
|
||||
tags: [auto-reinforced, chrome, rendering-performance, web-vitals, frame-rate, optimization, browser-engine]
|
||||
tags: [auto-reinforced, [[Chrome]], rendering-performance, web-vitals, frame-rate, [[Optimization]], [[Browser]]-engine]
|
||||
last_reinforced: 2026-04-20
|
||||
---
|
||||
|
||||
@@ -15,13 +15,13 @@ last_reinforced: 2026-04-20
|
||||
Chrome 브라우저 렌더링 성능(Chrome-Rendering-Performance)은 웹 콘텐츠가 사용자 화면에 표시되는 과정의 효율성을 극대화하는 것을 의미합니다.
|
||||
|
||||
1. **The Rendering Pipeline**:
|
||||
* **JavaScript**: 시각적 변화 유발 로직 실행.
|
||||
* **[[JavaScript]]**: 시각적 변화 유발 로직 실행.
|
||||
* **Style**: CSS 규칙을 요소에 적용.
|
||||
* **Layout (Reflow)**: 기하학적 형태(크기, 위치) 계산. (가장 비싼 연산)
|
||||
* **Paint**: 텍스트, 색상, 이미지 등을 픽셀로 채움.
|
||||
* **Composite**: 레이어들을 합쳐 최종 화면 구성 (GPU 활용).
|
||||
2. **핵심 최적화 전략**:
|
||||
* **Layout Thrashing 방지**: 읽기/쓰기 작업 교차 반복 금지.
|
||||
* **[[Layout Thrashing]] 방지**: 읽기/쓰기 작업 교차 반복 금지.
|
||||
* **Layer Promotion**: `will-change` 등을 통해 복잡한 애니메이션을 개별 레이어로 분리.
|
||||
* **Web Vitals**: LCP, FID, CLS 등 사용자 중심 지표 관리. (SEO와 연결)
|
||||
|
||||
@@ -31,5 +31,5 @@ Chrome 브라우저 렌더링 성능(Chrome-Rendering-Performance)은 웹 콘텐
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- [[SEO]], [[Efficiency]], UX-Design-and-Engagement, [[Scalability]], [[Systems-Thinking]]
|
||||
- **Key Tools**: Chrome DevTools Performance tab, Lighthouse, PageSpeed Insights.
|
||||
- **Key Tools**: [[Chrome DevTools]] Performance tab, [[Lighthouse]], [[PageSpeed Insights]].
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user