프론트엔드 개발자에게 브라우저는 뗄레야 뗄 수 없는 존재다. 브라우저는 아주 많은 기능을 수행할 수 있는 복잡하고 고도화된 어플리케이션이다. 따라서 브라우저 내부에서 일어나는 모든 일을 이해하는 것

프론트엔드 개발자에게 브라우저는 뗄레야 뗄 수 없는 존재다. 브라우저는 아주 많은 기능을 수행할 수 있는 복잡하고 고도화된 어플리케이션이다. 따라서 브라우저 내부에서 일어나는 모든 일을 이해하는 것은 너무나 어렵다. 하지만 복잡한 웹 어플리케이션을 개발하다보면 어쩔 수 없이 브라우저 단에서의 최적화가 필요하다. 이 때 브라우저의 동작 원리에 대해 제대로 이해하지 못한 상태라면 어플리케이션을 최적화하기란 쉽지 않다. 브라우저의 동작 과정에 대해 정리한 글을 찾았다. 이 글은 크게 다음과 같은 네가지 순서로 정리할 수 있다. 1. HTML로부터 DOM 트리를, CSS로부터 CSSOM 트리를 빌드합니다. 2. DOM 및 CSSOM을 결합하여 렌더 트리를 형성합니다. 3. 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. 4. 개별 노드를 화면에 페인트합니다.