1. 주소창에 입력란이 뭔지 인식합니다.
주소창에 텍스트를 입력하게 되면,
- 검색어인지
- URL인지
확인하게 됩니다.
검색어라면 검색엔진으로 갈 것이고, URL이라면 DNS 서버로 갑니다.
2. DNS서버에 IP주소를 받습니다.
저희가 치는 "naver.com" 같은 경우 도메인네임입니다. IP 주소는 숫자로 이루어진 주소로 직관적이지 않은 숫자들을 외우기는 힘드므로 도메인주소(문자열)로 이루어져 있습니다.
이 도메인 주소를 IP주소로 되돌려주는 것이 DNS 서버의 역할입니다.
3. IP주소로 해당 서버로 TCP 통신을 합니다.
DNS에서 받은 IP주소를 통해 네이버 서버로부터 홈페이지 정보들(HTML, CSS, JS, 사진 등등)을 받을 예정입니다.
TCP통신을 통해 리소스들을 받습니다.
4. 받은 리소스들을 렌더링 합니다.
랜더링 전 악성 바이러스의 유무를 검사합니다.
그리고 브라우저 엔진은 렌더링 엔진에게 해당 리소스들을 넘기고 렌더링이 끝나기를 기다립니다.
4-1. HTML, CSS 파싱
HTML과 CSS를 트리 구조로 파악하기 위해 파싱합니다.
4-2. DOM, CSSOM 트리구축
노드 관계들을 DOM, CSSOM으로 트리들을 구축합니다.
4-3. 레이아웃배치
DOM, CSSOM 들을 합친 정보를 통해 해당 노드들의 위치들을 배치합니다.
4-4. 페인트 그리기
위에서 배치한 레이아웃을 색이나 이미지 등을 입혀 페인트로 칠하게 됩니다.
참고
기록장입니다.