면접관님: 브라우저 렌더링 과정을 설명해보시겠어요?(+유투브)

https://youtu.be/_87sAy_SsxQ

 

나의 언어로 풀어본 최종 답변

 

우선 사용자가 URL을 입력하면 브라우저 엔진은 쿠키나 세션에 원하는 데이터가 캐싱이 되어있는지 확인합니다. 만약 요청한 정보가 있으면 렌더링 엔진에게 바로 보냅니다. 반면 요청한 정보가 없다며 도메인네임시스템(DNS)에 찾아가서 IP주소를 요청하여 받은 IP주소의 서버를 찾아가서 자료를 요청하고 데이터를 받아와 렌더링 엔진에게 전달합니다.

 

렌더링 엔진은 HTML문서를 파싱하여 돔트리를 구축하고, CSS 파일과 함께 모든 스타일 요소를 파싱하여 CSSOM 트리를 만듭니다. 그러다가 JS를 만나게 되면, 작업을 중지하고 JS Engine에게 제어 권한을 넘겨 JS Engine이 script를 파싱합니다. DOM트리와 CSSOM트리가 어태치하여 최종적으로 렌더링 될 내용이 담긴 렌더트리를 구축합니다.

 

렌더트리 구축이 끝나면 Reflow 과정이 진행되는데, 여기서는 각 노드가 가지는 정확한 위치와 크기를 계산합니다. 이를 토대로 RenderTree의 노드들을 화면의 올바른 위치에 배치하고 마지막으로 UI Backend가 UI를 화면 페인팅하여 사용자에게 최종적으로 결과화면을 보여줍니다!

 

• 이 모든 과정은 서버로부터 모든 데이터를 받고 나서 시작하지 않고 병렬적으로 진행된다. 더 빠른화면출력을 위해 데이터 일부를 받은 후 바로 화면을 표시하고, 그다음에 데이터를 더 받고 다시 화면을 표시하는 것이다.

 

 

브라우저를 이해하려면,  걔가 뭘로 이루어져있는지 알아야지?

• 사용자 인터페이스 : 주소표시줄, 이전/다음 버튼, 홈버튼, 새로고침/정지 버튼 등 요청한 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어한다
• 렌더링 엔진 : 요청한 URI를 브라우저 엔진에게 받아서 server에게 요청한다(통신). server로 부터 URI에 해당하는 데이터(HTML, CSS, JavaScript)를 받아서 파싱한 후 렌더링한다(chrome webkit - 에서 파생된 blink)
• 통신 : 렌더링 엔진으로부터 HTTP 요청 등을 받아서 네트워크 처리 후 응답을 전달한다.(OS 단에서 실행)
• 자바스크립트 해석기 : JavaScript 를 파싱한다(chrome V8)
• 자료 저장소 : 쿠키 등의 자료를 컴퓨터 하드디스크에 저장한다. (HTML5 부터 Web Database에 저장가능)
• UI 벡엔드 : render tree를 browser 에 그리는 역할을 담당한다

 

 

브라우저의 렌더링 프로세스를 쉽게 이해해보자

 

1. 사용자가 주소창에 url을 딱 치면...!

 

• 일단 브라우저 엔진은 리소스절약을 위해 이 URL을 브라우저 저장소(LocalStorage, session Storage, 쿠키)에서 찾아본다. 만약 찾았다면? 럭키! 바로 가져다 쓰면 되니까! 서버전송이 없기때문에 네트워크 트래픽 비용 줄여준다.
• 만약 못찾았다면, 브라우저 엔진은 DNS(웹사이트의 IP 주소와 도메인 주소를 이어주는 환경/시스템임)에게 IP주소를 요청함. 여기서 받은 IP주소의 서버로 찾아간다. 
• 그렇게 브라우저 엔진과 서버가 만나면 악수부터 해야지? 랜덤한 숫자 번호표를 챙겨간 브라우저 엔진은 거기에 1을 더해서 브라우저에게 넘겨주고, 브라우저도 넘겨받은 뒤 1을 더해 다시 서버에게 전달함. (이를 3 way handshake라 한다.) 악수가 끝나면 드디어 브라우저 엔진은 데이터를 요청하고(HTTP Request), 서버는 요청받은 데이터를 건네준다.(HTTP Response)

 

2. 이렇게 힘들게 받은 데이터, 사용자에게 예쁘게 출력해줘야지? 

• 이때부터는 렌더링엔진이 브라우저 엔진에게 자료를 전달받아 일하기 시작함. 브라우저마다 사용하는 엔진은 다 다른데, 크롬은 웹킷에서 파생한 블링크라는 렌더링 엔진을 사용하고 있음.
• 먼저 브라우저가 알아먹을 수 있는 형태로 파싱(Parsing)을 해야한다! 가장먼저 HTML을 파싱하여 DOM트리를 생성하고, 중간에 만난 CSS파일과 styles들을 파싱하여 CSSOM트리도 만든다. 
• 그러다가 JS스크립트를 만나게 되면, 작업을 중지하고 JS Engine에게 제어 권한을 넘긴다. 자스엔진은 추상구문트리인 Abstract Syntax Tree를 만들고 실행한다. 이후 중지했던 HTML작업을 계속한다.
• 이것들은 결국 최종적으로 화면에 출력하게 될 '렌더 트리'를 구축하기 위한 작업이다! DOM 트리와 CSSOM 트리는 어태치(attatchment)되어 '렌더 트리'가 만들어진다. 

 

3. 렌더트리 구축 완료!! 마지막으로 UI를 예쁘게 그려보자!

• 이후 렌더링 엔진은 Layout(배치)작업을 시작하는데, RenderTree의 노드들을 화면의 올바른 위치에 표시하는 것을 의미한다.
• 그 다음 UI Backend가 Render Tree의 노드들을 돌면서 UI를 그립니다. 이후 Render Tree에 있는 Node를 순서대로 구성하는 composition작업을 완료하는데, 여기까지의 과정을 operation이라고 한다.
• 최종적으로 웹 사용자에게 결과 화면을 출력!!!

 

 

느낀점

팀원들과 장장 3시간을 떠들며 이해한 브라우저 렌더링 원리. 처음엔 너무 방대하고 막연해 보였지만 이제는 그 흐름이 보인다! 흐름속에서 좀 더 깊게 파보고싶은 DNS, HTTP, 자료저장소 등등 많은 개념들이 튀어나왔다. 이것들을 배울때에도 어떻게 쓰이는지 알고있으니 더 흥미롭겠다. 항상 사용하는 브라우저인데 이번기회에 제대로 알게되어 정말 즐거운 시간이었다. 

 

 

참고자료

https://developer.chrome.com/blog/inside-browser-part3/

Inside look at modern web browser (part 3) - Chrome Developers

https://betterprogramming.pub/the-different-types-of-browser-storage-82b918cb3cf8

The Different Types of Browser Storage

https://davidhwang.netlify.app/Developments/browser-rendering-process/

browser rendering process

 

추가질문예상

• 렌더링 성능을 최적화하기 위해 어떤걸 할 수 있을까요?