면접 중에
네이버가 어떻게 실행되는지 과정을 설명해주세요
라는 질문이 있었다. 머리속으로는 과정을 그릴 수 있었지만, 막상 면접에서 이 부분을 말로 설명하려니 정신이 없었다. 실제로 대답도 그렇게 만족할만한 대답은 아니었다고 생각한다.
면접이 끝난 후, 생각해보니 웹 개발자라고 말하고 웹 개발자 포지션에 지원하면서 이런 부분을 설명할 수 없다는 것은 말도 안된다고 느껴졌다. 지금 내가 리액트니 타입스크립트니 이런 스택을 공부할 때가 아니었다.
우선 웹이 어떻게 동작하는지 확실히 내가 이해하고, 설명할 수 있을 정도는 되어야 한다고 생각한다.
전체적인 렌더링 과정
- 주소창에 입력받은 주소를 받는다.
- 네이버의 서버를 찾아간다.
- DNS가 연결해 줄 곳을 찾는다.
- 서버의 기본 html 파일을 클라이언트로 보낸다.
- 브라우저는 텍스트로 이루어진 html 파일을 파싱한다.
- 한 줄씩 읽으면서 DOM트리를 만든다.
- 중간에 link태그를 만나 css 요청이 발생하게 된다면, 요청과 응답 과정을 거치고 css를 파싱한다.
- css 파싱이 끝난다면 중단된 html을 다시 읽고 DOM트리를 완성한다.
- 완성된 DOM트리와 CSSOM 트리를 합쳐 Render tree를 만든다.
- HTML 파서가 스크립트 태그를 만나게 된다면 JS코드를 실행하기 위해 파싱을 중단한다. 제어권한을 JS엔진에 넘기고 JS코드 or JS파일을 로드하고 파싱 후 실행한다.
HTML => DOM tree 구성과정
CSS => CSSOM 구성과정
DOM,CSSOM ⇒ Render Tree
렌더트리는 실제로 표현되는 노드(요소)들로만 구성된다.
display : none 속성이 설정된 노드는 어떤 공간도 차지하지 않기 때문에 render tree를 만드는 과정에서 제외된다. visibility : invisible속성도 보이지 않는 것은 비슷하지만, 공간은 차지하고 있는 상태이고 단순히 보이지만 않게 해주기 때문에 render tree에 포함된다.
Comments