랜더링 되는 과정을 보면 이전까지는 단순히 naver.com 혹은 google.com 이라고 검색하던 것에서 조금 더 깊이 있는 '생각'을 할 수 있다.
그렇다면 브라우저 렌더링은 어떻게 이루어지게 될까?
브라우저가 렌더링 되기 위해서는 우선 요청을 해야한다.
아무리 준비가 되어있어도 Client 쪽에서 사용하지 않으면 무의미하니까...
예를 들어 브라우저창에 www.google.com 이라고 입력했다고 생각해보자.
이 주소는 Domain 주소에 해당하게 되므로 DNS server로 가서 실제 주소의 서버 쪽으로 요청을 보내게 된다.
서버가 클라이언트에게 응답으로 index.html을 클라이언트로 보내게 된다.
이 때 React의 경우 즉, SPA는 index.html이 하나만 존재한다.
그리고 서버로부터 받아온 파일들로 Render Tree를 구성하고 이를 실제 화면에 렌더링하게 되는 것이 끝이다!
어찌보면 굉장히 간단할 수 있는데, 조금 더 풀어서 설명해보자면,
DNS가 연결해줄곳을 찾을 때 만약 https 방식이라면 그 방식대로 통신을 하게 될것이다.
그리고 서버에서 index.html을 보내면 브라우저는 텍스트인 index.html을 파싱하여 DOM 트리를 만들어나가고 중간에 link 태그를 만나면 css 요청과 응답을 거쳐 CSSOM트리를 합쳐서 앞서 말한 Render Tree를 만들게 된다.
중간에 HTML 파서는 script 태그를 만나게 되고 이때 Javascript 실행을 위해서 파싱을 중단하게 되며 제어권한을 Javascript 엔진에 넘기고 그 코드를 로드에서 파싱하고 실행하게 된다!
.jpg)