브라우저 렌더링 #1 (검색창에 naver.com을 쳤을때 일어나는 일)

JS

제로베이스에서 시작하는 프론트엔드 공부..

업무를 하다보니 백엔드도 백엔드지만, 프론트엔드 지식이 너무 빈약하다는 생각이 들어, 프론트엔드 공부를 시작했다.
아카데미에서 프로젝트를 진행할 때엔 프론트엔드를 맡은 경험이 많은데, 사실상 아무것도 알지 못한채 말 그대로 '구현' 위주로 학습을 했던 것 같다. 그래서 이론적인 지식이 매우 빈약했던 것 같아서 지금이라도! 공부를 ... 해보려고 한다.

사실 공부를 한지는 한 세달 정도 된거같은데, 퇴근 후에 공부를 하는 게 쉽지가 않아서 애벌레기어가듯 진도를 나가고 있다. 서론은 이정도 하고.. 지금까지 배운 내용을 정리할 겸.. 오랜만에 벨로그를 작성한다.

 

---

브라우저란?

• Chrome / Safari / Firefox / IE 등. 인터넷 접속시 사용하는 것들.
• MDN에서 말하는 브라우저 : 웹에서 페이지를 찾아 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 있도록 하는 프로그램.

1. 찾아서, 보여준다.
2. 유저가 선택한 자원을 서버로 부터 받아와서 유저에게 보여주는것. 이 자원은 페이지 외에도, 이미지, 비디오 등 모든 콘텐츠들이 포함된다.

프론트엔드에선, 브라우저를 많이 알면 알수록 좋다.

브라우저 렌더링 과정

1. 도메인네임 -> ip로 변환 
2. 백엔드에 요청 (서버로 요청) 
3. 그에 맞는 요청된 결과 반환 
4. 반환 받으면 HTML인데 이 HTML은 byte로 온다. 따라서 charset으로 맞는 형태로 문서화한다.
5. 이걸 파싱을 통해 파서트리 만들어 
    (파싱? 정확히 html 완성되지 않을 수도 있어서 완벽한 html문서를 만드는것이다. 
     왜냐하면 html은 좀 이상해도 그거 좀 제외하고 해주기 때문) 
6. 파서트리를 통해 dom트리 구성 
     --> css style sheet link 태그 등을 만나면 cssom을 만들고 이걸 다 만들면 dom 생성 재개 
   중간에 script 태그 만나면 dom 생성 멈추고 제어권을 잃어(브라우저 --> 자바스크립트 인터프리터) 
   JavaScript를 다 읽고난 후에 다시 dom 생성 -- 완료.

7. 6번의 과정을 거쳐 dom 트리 생성. 
     (display : none 안들어가) 보여주기 위한 것. 

8. dom이 그려지고, 이 과정을 레이아웃 / 페인트 라고 한다. 
        레이아웃 -- 어느 위치에 어느크기로 그릴지 정하고 
        페인트 --- 어떤 색을 칠할지 정하는

9. 브라우저에 렌더링 끝.

단, JavaScript를 통해 버튼을 눌렀을 때, 돔이 다시 그려지게 될 가능성이 있다.
뭔가 추가되거나 html 문서가 변형이 되었을 경우, 그럼 그 위치를 변경 또는 새롭게 그려야 할때.
그럴 땐, 레이아웃 다시 그리고, 페인트도 다시 하게 된다. 이 과정을 (리플로우, 리페인트) 라고 한다. 
(페인트 과정만 할 수 있기 때문에, (display none vs visibility (레이아웃을 해치치 않아.)))

 

간단하게 정리하면 그러하지만, 조금 더 알아본 내용이 재미있었다.

 

---

주소창에 'naver.com'을 쳤을 때 일어나는 일.

1. 브라우저 캐시
   브라우저는 캐싱된 DNS 기록들을 통해 'www.naver.com'에 대응하는 IP주소를 탐색한다. (브라우저는 일정기간 유저가 방문한 사이트의 DNS 정보를 갖고 있는다)
2. OS 캐시
   브라우저 캐시에 없다면, 브라우저는 systemcall을 통해서 OS에 기록되어있는 DNS 기록들의 캐시에 접근한다.
3. 라우터 캐시
   OSI 7계층중 데이터 통신계층에 있는 라우터에 들어있는 DNS 캐시를 조회한다. 라우터 안에는 DNS 서버의 주소가 저장되어 있다. 라우터를 거치게 되어 DNS 주소가 없으면 ISP까지 올라가 확인하게 된다.
4. ISP 캐시
   ISP는 DNS 서버를 구축하고 있다. 따라서 마지막으로 DNS 정보를 찾을 수 있는 마지막 단계이다.

기본적으로는 국내 DNS로 보내지고, 여기서도 못찾으면 타고타고 상위로 올라가서 해외 DNS로 가서 찾고, 이런식으로 쭉쭉 타고 들어가서 ip를 찾을 때까지 서버들을 오가며 찾거나, 에러를 내거나 하는 것이다.

 

ip 탐색 과정