🌎 프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정

- 브라우저에서 어떤 과정을 통해 렌더링이 실행되는지에 대해 알아봅니다. --- 브라우저의 동작 과정은 프론트엔드 개발자 면접 질문에서도 꽤 자주 나오는 질문입니다. 대부분의 프론트엔드 개발자는 브라우저에서 동작하는 애플리케이션을 만들기 때문이죠. 이를 중요 렌더링 경로(Critical rendering path)라고 부릅니다. 사실 이러한 부분을 몰라도 개발을 하는데 있어서는 문제가 없지만, 최적화 과정이 필요할 때는 이야기가 달라집니다. 잘못 사용한 CSS나 자바스크립트 코드가 애플리케이션의 속도와 성능을 떨어뜨리기도 하는데, 어떤 부분이 문제를 일으키는지 알아야 하니까요. (제가 작성한 글이긴 하지만) 본문에서는 HTML 파싱, CSS 파싱, 렌더 트리 구축, 리플로우, 리페인트를 순서대로 다룹니다. 그리고 브라우저의 기본 최적화 과정의 한계를 가상 DOM이 어떻게 해결하고자 했는지도 정리되어 있습니다. 브라우저의 렌더 과정의 순서가 궁금한 개발자 분들께 도움이 될 수 있을 것 같습니다.