❓ 주소창에 www.google.com을 검색한다면?
1. DNS 를 통해 IP 주소 획득
2. 획득한 IP 주소를 이용하여 웹 브라우저가 웹 서버에게 해당 웹 사이트에 맞는 html 문서 요청
- TCP/IP 3 Way Handshake, HTTP Request
3. WAS와 데이터베이스에서 웹페이지 작업 처리
4. WAS에서의 작업 처리 결과들을 웹 서버로 전송하고 웹 서버는 웹 브라우저에게 html 문서 결과 전달
5. Critical Rendering Path를 통해 웹 브라우저 화면에 웹 페이지 내용 출력
6. DOM 트리 빌드
7. CSSOM 트리 빌드
8. Render Tree 생성
9. Layout
10. Paint / Reflow&Repaint
11. Composite
12. 도메인에 맞는 화면이 웹 브라우저에 출력
Cf. 1~4: 데이터를 받아오는 과정 / 5~11: 웹 브라우저에 렌더링되는 과정
✔️ 웹 동작 방식
✔️ 1. DNS?
DNS( Domain Name System )는 URL들의 이름과 IP 주소를 저장하고 있는 데이터베이스, 즉 웹 사이트를 위한 주소록이다. 숫자로 된 IP 주소를 입력해도 원하는 웹 사이트에 접속할 수 있지만, 모든 사이트의 랜덤해 보이는 IP 주소를 기억하고 검색하는 것은 어려운 일이다. 사람은 '이름'을 외우는 것이 더 친숙하기 때문에, 사람이 좀 더 쉽게 웹 사이트를 접속할 수 있도록 매핑해 주는 역할을 한다.
사람이 도메인 주소를 입력하면 DNS를 통해 IP 주소를 확인하게 되는데, 이때 브라우저 캐시, OS 캐시, router 캐시, ISP 캐시 순으로 DNS 서버를 확인한다. 원하는 IP 주소를 찾을 때 까지 DNS query를 반복하게 되는 데 이러한 과정을 Recursive Query라고 한다.
✔️ 2. TCP/IP 3 Way Handshake, 4 Way Handshake?
TCP/IP는 클라이언트 컴퓨터가 서버에 연결하는 방법을 말한다. HTML 문서를 요청하는 HTTP 요청 메시지는 TCP/IP 프로토콜을 사용하여 서버로 전송되는데 이는 IP는 비신뢰성, 비연결성의 특징을 갖기 때문에 신뢰성과 연결성을 보장하는 TCP(전송 제어 프로토콜)를 활용해 통신한다. 서버를 연결하기 위해서는 3 Way Handshake과정이 일어나고 종료하기 위해서는 4 Way Handshake 과정이 일어난다.
✨ 3 Way Handshake
- SYN: 클라이언트에서 서버로 연결하기 위한 요청을 보낸다.
- SYN-ACK: 서버의 포트가 열려있고 연결할 수 있음을 의미하는 메세지를 클라이언트에게 보낸다.
- ACK: 클라이언트는 SYN/ACK 데이터 패킷을 수신하고 ACK 메시지로 서버에 다시 응답
❓ ESTABLISHED: 통신 채널이 설정되고 클라이언트는 서버에 연결하여 데이터를 송수신할 수 있게 된 서버의 상태
✨ 4 Way Handshake
- FIN: 클라이언트가 연결을 종료하겠다는 FIN 플래그를 서버로 전송한다.
- ACK: 확인메시지 ACK를 클라이언트에 보내고 상태를 CLOSE-WAIT로 전환한다. 클라이언트도 서버에서 종료될 준비가 됐다는 FIN을 받기 위해 FIN-WAIT-2 상태로 전환된다.
- FIN: CLOSE 준비를 마친 서버가 클라이언트에게 FIN 플래그를 전송한다.
- ACK: 해지 준비가 되었다는 정상 응답 ACK를 서버로 보내고 TIME-WAIT로 상태가 전환된다.
❓ TIME-WAIT: 의도치 않은 에러로 인해 연결이 데드락으로 빠지는 것을 방지하기 위해 변경되는 것으로 만약 에러로 인해 종료가 지연되다가 타임이 초과되면 CLOSED 상태로 변경된다.
✔️ 3-4. WAS?
WAS는 사용자의 컴퓨터나 장치에 웹 어플리케이션을 수행해주는 미들웨어이다. Web Server는 정적인 컨텐츠( HTML, CSS, IMAGE )등을 요청받아 처리하고 WAS는 동적인 컨텐츠( JSP, ASP, PHP )등을 요청받아 처리한다. WAS는 DB 서버에 대한 접속 정보가 있기 때문에 외부에 노출 될 경우 보안에 문제가 생길 수 있어 Web Server를 통해 요청을 전달받고 처리 결과를 Web server로 전송한다.
✔️ 5. Critical Rendering Path?
Critical Rendering Path는 웹 브라우저의 출력 단계를 의미한다. 성능 최적화를 위해서는 수신받은 HTML, CSS, JS 파일들이 어떤 단계를 걸쳐 렌더링이 일어나는지 파악하고 해당 과정들을 최소화하는 것이 필요하다.
Critical Rendering Path는 Parsing, Rendering Tree( Style ), Layout, Paint, Composite 순으로 일어난다.
✔️ 6-7. Parsing? (DOM/CSSOM)
HTML과 CSS 파일은 단순한 텍스트로 되어 있기 때문에 연산과 관리가 용이하도록 Object Model로 만든다. HTML은 DOM( Document Object Model )으로 Parsing 되는데 문서 마크업의 속성 및 관계가 포함되어 있다. CSS는 CSSOM( CSS Object Model )으로 Parsing되고 요소가 렌더링 될 때 어떻게 표시될 지에 대한 내용이 포함되어 있다. JavaScript는 HTML, CSS와는 다르게 브라우저 렌더링 엔진이 아닌 JS 엔진이 담당하여 Parsing 하고, AST( Abstract Syntax Tree ), 즉 컴퓨터가 이해할 수 있는 기계어로 변환하고 실행된다.
✔️ 8. Render Tree ( Style/Attachment )
DOM과 CSSOM을 결합하여 Render Tree가 생성된다. Render Tree는 렌더링에 필요한, ,실제 화면에 표시되는 노드들로만 구성되어 있다.
❓ 실제 화면에 표시되는 노드?
display: none은 화면에 어떤 공간도 차지하지 않기 때문에 Render Tree 생성 과정에서 제외된다.
visibility: invisible은 요소가 눈에 보이지 않을 뿐 공간을 차지하므로 Render Tree에 포함된다.
✔️ 9. Layout
브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산하는 단계이다. %, vh, vm 등 상대적 위치나 크기 속성은 실제 화면에 그려지는 px 단위로 계산되어 변환된다.
✔️ 10. Paint / Reflow&Repaint
Layout 단계에서 계산이 완료된 요소들을 실제로 화면에 그리는 단계이다. 이 단계에서 텍스트, 색상, 이미지, 그림자 효과 등의 스타일 요소들이 처리된다. 브라우저 화면을 늘리거나 줄이는 등 크기 조절을 하거나, 어떤 버튼을 눌러 화면에 요소가 추가 삭제되는 등의 활동이 일어나면 브라우저는 해당 부분을 다시 계산하고 그려낼 필요가 있다. 이때 레이아웃을 다시 계산하는 것을 Reflow라고 하고 새로운 렌더트리를 바탕으로 다시 페인트 하는 것을 Repaint 라고 한다.
✔️ 11. composite
Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타내는 것으로 화면에서 웹 페이지를 볼 수 있다 !
