dev tools를 이용하여 원인을 찾을 수 잇는 방법 과 분석이 좋았습니다.

YU NA Joe

이 강의는 브라우저가 HTML을 받아 DOM을 만들고, CSSOM과 결합해 화면에 픽셀을 그려내는 Critical Rendering Path(CRP) 과정을 처음부터 끝까지 다룹니다. 단순한 DOM 조작을 넘어, CSS와 JS가 성능에 어떤 영향을 주는지, 이미지·폰트 최적화, Lazy Loading, Intersection Observer, 가상 리스트, 그리고 DevTools 실습까지 이어지며 실제 웹 성능을 눈에 띄게 개선할 수 있는 실전 전략을 배울 수 있습니다.

nhcodingstudio

지식공유자의 깜짝할인

DOM에서 픽셀까지, 브라우저 렌더링과 CRP 완전 정복 - [DOM 완전 정복 Part 3]

실습 중심

웹개발

프론트엔드

이론과 실습 한 번에

이론 실습 모두

입문

초급

중급이상

HTML/CSS

자바스크립트

JavaScript

리액트

React

Document Object Model

frontend

Section #1: 브라우저 렌더링 파이프라인 – CRP를 코드로 구현하며 이해하기

Section #2: 브라우저 렌더링 성능 진단 – DevTools로 병목 파헤치기

Section #3: 브라우저 생명주기와 실전 렌더링 최적화 전략

미션