IT의 IT 블로그

이전 글에서 브라우저의 렌더링 과정을 정리해보았습니다.이번 글에서는 그 흐름 위에서 React가 어떤 방식으로 렌더링을 수행하는지,추가로, React의 렌더링 과정이 브라우저 렌더링 파이프라인과 어떻게 맞물려 동작하는지를 살펴보겠습니다.본격적으로 React의 렌더링 과정을 살펴보기 전에,먼저 기존 브라우저의 업데이트 렌더링 흐름을 간단히 확인해보겠습니다.1. 렌더링 비용의 핵심 구간: Layout과 Paint아래 그림에서 볼 수 있듯이, Critical Rendering Path(CRP) 중에서도UI 업데이트 시 가장 많은 비용이 발생하는 단계는 Layout과 Painting입니다.이 두 단계는 실제 픽셀 배치와 그리기를 수행하며,계산량이 많고 메모리 접근이 일어나기 때문에 성능에 큰 영향을 미칩니다. ..

안녕하세요, 브라우저 렌더링 과정에 대해서 깊이 이해해보고자 블로그 포스팅을 하게 되었습니다.대부분의 내용은 우아한 테크 기술 블로그와 네이버 D2 기술 블로그를 참고하고 정리하며 적게 되었습니다.1. 이 글에서 설명하는 브라우저Microsoft EdgeSamsung InternetFirefoxChromeOpera위 브라우저 중 Chromium 기반(Chrome, Edge 등)이 절대적인 비중을 차지하고 있으므로,Blink 렌더링 엔진과 V8 JavaScript 엔진을 중심으로 설명합니다. 2. 웹 브라우저(web browser)란?웹 브라우저는 웹 상의 자원을 요청하고, HTML 문서·이미지·CSS·JavaScript 등 다양한 콘텐츠를 해석하여 사용자에게 표시하는 소프트웨어입니다.대표적인 브라우저로는..