개인적으로 면접질문으로 정말 많이 듣기도 했고, 내가 만드는 페이지가 적어도 어떻게 브라우저에 나타나는지는 알는게 맞다 싶어서 짧지만 핵심만 간단하게 정리하려고 한다.
랜더링이란?
개발자가 작성한 HTML, CSS, JS 문서를 브라우저에서 출력되는 과정을 말한다. 브라우저에 따라 다르지만 크롬은 블링크(Blink), 사파리는 웹킷(Webkit)이라는 랜더링 엔진을 사용한다.
랜더링 진행방식
사용자가 브라우저를 통해 웹 사이트에 접근하면 서버로부터 HTML, CSS 등 필요한 리소스를 받는다. 그 과정은 아래와 같다.
- 이미지는 네이버 기술 블로그를 참고
- 브라우저가 서버로 요청한 HTML 파일과 정적 파일을 요청하여 받아온다.
- 랜더링 엔진이 브라우저가 가져온 HTML과 CSS를 파싱한다.
- HTML은 DOM 트리를 생성한다. CSS 파일은 CSSOM 트리를 생성한다.
- 랜더링 엔진이 Attachment 단계를 걸쳐 랜더 트리를 생성하게 된다.
- Layout 단계를 걸치면서 랜더트리의 요소들에 입력된 스타일 rule대로 요소들이 입력된다. 스타일과 위치, 배치를 계산한다.
- 위의 작업이 끝난 랜더트리는 painting 과정을 통해 브라우저 화면에 그려진다.
404