브라우저 렌더링 원리

브라우저의 렌더링 원리

면접에서 가장 많이 물어보는 질문이지만 생각보다 많은 지원자들이 자세한 동작 원리를 알지 못한다고 한다.

본인도 동작 과정이 명확하게 떠오르지 않았다.. React로 개발을 하다보면 이미지와 같은 리소스가 많을 때 화면이 느리게 로드되어 개선의 필요성을 느꼈던 순간들이 꽤 있었다.

이런 점들을 개선하기 위해 필요한 개념인 브라우저 렌더링 원리에 대해서 공부해보고자 한다.

지금부터 "www.google.com" 이라고 쳤을 때 화면에 보여지기까지의 과정에 대해서 알아보겠다.

브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다.

CRP란

브라우저가 HTML, CSS, Javascript를 화면에 픽셀로 변환하는 일련의 단계를 말한다. 이를 최적화하는 것이 렌더링 성능을 향상시키는 것이다.

브라우저 렌더링 과정

1. 주소창에 특정 주소 입력 "www.google.com"
2. http, https 조건에 맞는 방식으로 통신하면서 DNS(도메인을 IP주소로 변환)가 실 서버가 있는 곳으로 연결한다.
3. 서버의 기본 설정이 index.html로 되어 있기 때문에 서버에서 해당 파일을 클라이언트에게 보내준다.
4. 브라우저에서 HTML 파싱 후, DOM(Document Object Model) 트리를 구축한다.
5. link 태그를 만났을 때 CSS 파싱 후, CSSOM(CSS Object Model) 트리를 구축한다.
6. Javascript 실행
   • 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
7. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
   • 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
8. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
9. 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)
   
   (color, visibility 등 레이아웃 수치에 영향을 기치지 않는 경우 repaint 과정만 진행한다.)