기묘한 개발 이야기

개요 브라우저에서 웹 페이지를 렌더링 하는 과정을 알아보기 위해 해당 글을 읽고 정리한다. https://javascript.plainenglish.io/web-performance-understanding-critical-rendering-path-72283caefc1f 내용 브라우저 렌더링이란? 화면에 웹 페이지를 렌더링 하기 위해 브라우저에서 수행하는 작업 또는 단계의 시퀀스. 1. 로더(Loader)가 서버에서 리소스(HTTP, CSS, JavaScirpt) 스트림을 읽음. 2. 수신된 HTML을 파싱하여 DOM생성 3. CSS 파싱하여 CSSOM 생성 4. DOM과 CSSOM이 결합된 Render Tree 생성 - 모든 요소의 위치 및 치수(레이아웃) 계산 포함 5. 화면에 실제 픽셀을 페인팅 ..