# 브라우저 원리

이 글은 과거에 정리해둔 원론 관련 글을 리펙토링한 글의 모음입니다. 필요한 내용을 **찾기**(control + F)로 찾아 읽으시는 것을 추천드립니다.

## 목록

브라우저의 동작

## 브라우저의 동작

브라우저의 동작은 **유저 인터페이스**와의 상호작용으로부터 시작하여 최종적으로 **화면을 그리는 과정**입니다. 브라우저의 동작을 이해하는 것은 개발 중 예기치못한 동작이 발생하였을 때 이를 이해하는데 도움을 줍니다.

예를 들어 **"웹 화면이 빠르게 보여지도록 개선하세요"** 라는 요청이 들어왔을 때 이를 가능케하기 위한 방법을 브라우저의 동작단을 알고 있느냐 아니냐에 따라 그 밀도가 달라질 수 있습니다. 이에관해 꽤 흥미로운 글이 있으니 읽어보면 좋을 것 같습니다.

[브라우저 동작원리를 알아야 하는 이유가 무엇인가요?](https://helloinyong.tistory.com/320)

### url을 입력하면 벌어지는 일

먼저 브라우저가 동작하는 시작인 url의 입력부터 시작합니다. 아래 과정순서를 통해 브라우저는 화면에 그릴 문서를 서버로부터 받아옵니다.

1.브라우저에 입력된 url은 파싱되어 domiain name server(DNS)에서 매칭되는 서버 ip를 찾는 것부터 시작합니다. DNS 서버는 Local, Root, Top-level DNS 순서로 요청받은 domain과 일치하는 ip를 찾습니다. 이 과정을 자세히 살펴보려면 아래 글을 참고하면 좋습니다.

[DNS란?](https://hanamon.kr/dns%EB%9E%80-%EB%8F%84%EB%A9%94%EC%9D%B8-%EB%84%A4%EC%9E%84-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EA%B0%9C%EB%85%90%EB%B6%80%ED%84%B0-%EC%9E%91%EB%8F%99-%EB%B0%A9%EC%8B%9D%EA%B9%8C%EC%A7%80/)

**추가**

DNS를 찾는 것은 DNS 프로토콜을 이용하며 이는 UDP 방식으로 이뤄지며 한번 등록된 DNS는 캐싱되어 활용됩니다.

2.ip를 얻어내면 router가 해당 서버의 gateway로 이동시켜주고 ARP를 이용해 MAC 주소를 가져옵니다. 이 부분의 개념은 network공부를 전반적으로 하거나 개념적으로만 이해해도 좋습니다.

3.handsaking 하여 TCP를 수립합니다. handshake는 TCP 연결을 수립하는 과정으로 아래 글을 참고하면 이해하기 좋습니다.

[handshake ](https://mindnet.tistory.com/entry/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-22%ED%8E%B8-TCP-3-WayHandshake-4-WayHandshake)

4.브라우저는 요청(request)을 보내고 서버는 문서(document)를 응답(response)합니다. 브라우저는 이 문서를 브라우저가 가진 랜더링엔진을 통해 그려냅니다.

### 브라우저가 그리는 과정


위 그림은 [How browsers work](https://web.dev/howbrowserswork/) 라는 글에서 가져온 브라우저의 구성입니다. 이 중 **Redering engine**이 화면을 그리는 핵심적인 부분입니다.(이외에 영역이 궁금하다면 위 링크 혹은 네이버 D2의 번역글을 참조합니다)

[d2의 번역글](https://d2.naver.com/helloworld/59361)