브라우저에서 주소를 입력했을때
해당 내용은 면접에서 많이 나오는 질문인지라, 면접때 조금이라도 덜 당황하고 대답하고 싶다는 생각으로 정리해보았다.😂
🛻1.서버로부터 리소스(데이터)를 받는 과정.(=웹 동작 방식)
MDN에서는 이 과정을 상점으로 이동하여 주문한 상품을 받는 과정과 유사하다고 설명되어있다.🛒
1.브라우저는 DNS서버를 통해 해당 도메인을 가진 IP를 찾는다.(=주소록을 열고 찾고자하는 상점(도메인)의 주소를 찾는 과정)
- DNS는
Domain Name System Servers의 줄임말로, 복잡한 IP에 대한 도메인 정보가 있는 서버를 말한다. - DNS서버를 찾기 전에 캐싱된 DNS기록을 뒤져서 있으면 DNS 서버 요청없이 해당 IP주소를 반환하고 없다면, DNS 서버로 요청한다.
2. 브라우저는 URL 정보와 함께 서버로부터 요청 메시지를 보낸다.(=상품을 주문하는 과정)
- http 요청은 주로 TCP/IP을 사용하여 전송.
- TCP/IP(Transfer Control Protocol / Internet Protocal) : 전송제어 규약 / 인터넷 프로토콜은 브라우저와 서버 사이에 데이터를 통신하는 규약을 말함.(=일종의 이동수단ex)자동차, 배, 걸음 등..)
- 서버에게 데이터를 보내기 위해서 TCP는
Three Hand Shaking등 여러 방법을 사용하는데, 이는 패킷을 보내고나서 끝내는것이 아닌 보내졌는지를 서버에 확인하는 과정이 추가된다. Three Hand Shaking은 클라이언트는 최초 'SYN'플래그로 서버에 접속하여 패킷을 보내고, 서버측은 'SYN/ACK'플래그를 클라이언트 측에 보낸다. 마지막으로 클라이언트는 'ACK' 플래그를 보내 데이터를 교환.
3. 서버는 요청을 승인하고 작업을 처리한 후 각종 리소스(HTML,Javascript,CSS등)와 요청 결과를 함께 응답(response)을 돌려준다.(=상점에서 원하는 상품을 전달해주고 이를 손님에게 전달해주는 과정)
4. WAS 미들웨어를 이용하여 동적인콘텐츠를 제공하는 파일 처리(JSP,PHP )와 DataBase 연동 요청과 조회된 결과를 서버에 돌려준다.
- 웹 서버 혼자서는 작업을 처리하는데 많은 부하가 발생할수도 있기 때문에, 이를 돕기위한 미들웨어가 있는데 이를
WAS(WebApplicationServer)라고 한다. - 반대로
HTML,CSS,이미지파일등 정적인 파일을 처리는 웹 서버에서 한다.
5. 서버는 웹 서버와 WAS에서 작업한 결과를 상태코드 값과 함께 브라우저에게 돌려주고 이를 출력한다.(=주문한 상품과 정보를 집에 보여준다.)
- 1XX:정보응답.
- 2XX:성공.
- 3XX:클라이언트 리다이렉트.
- 4XX:클라이언트 에러
- 5XX:서버 에러
2.⚒️웹 브라우저 랜더링 과정
해당 부분은 서버로부터 받은 HTML,CSS,Javascript등의 파일들을 출력하는 순서를 설명한다.
1. HTML은 Dom Tree, CSS는 CSSOM(CSS Object Model)Tree 를 만든다.
2. HTML Dom Tree와 CSSOM을 이용해 랜더링 트리 생성.
- 랜더링 트리를 생성하는 과정에서 일부 태그는 트리 생성에서 제외.(
meta,script태그등) - CSS 속성값 설정때문에 숨겨진 태그들도 랜더링 트리 생성 과정에서 생략 된다. 예를 들어 위 사진에서 보 듯,
p태그안에span태그는display:none속성때문에, 랜더링 트리 생성시 제외 되어있는것을 알 수 있다.
🌟visibility:hidden도 요소를 숨기는 역할을 하지만,display:none과의 차이는 공간을 차지하는가의 차이이다.visibility:hidden는 요소를 숨기지만 공간을 차지하기때문에 랜더링 트리에 구성이 되지만.,display:none는 아예 공간할당이 되지않기때문에, 생성과정에서 생략이 된다.
3. Layout
- 랜더링트리를 바탕으로 루트에서 노드를 시작하여 순회하면서, 브라우저의 뷰포트 및 각 요소의 위치 및 크기 계산.(Reflow)
4. Paint
- 랜더링 트리를 이용해 실제 픽셀로 변환 하고 브라우저에 해당 내용을 그린다.(
painting) - 스타일이 복잡할수록 많은 시간이 걸린다.(ex.단색은 패인팅에 걸리는 시간과 비용이 적게들지만, 그림자는 시간이 오래걸림)
- 3단계 Layout 단계와 합쳐서
Rerendering이라고 부른다.
참고
웹의 동작 방식(MDN)
주소창에-www.google.com을-입력했을-때-일어나는-과정
'www.google.com'을 주소창에서 입력하면 일어나는 일
브라우저는 어떻게 동작하는가?
Render-tree Construction, Layout, and Paint
