주소창에 특정 웹 페이지의 주소를 입력했을 때,어떤 과정을 통해 데이터가 전달되고, 화면에 렌더링되는지를 이해하시려면~ 🧮 데이터를 받아오는 과정 1. www.google.com 입력하면 입력한

주소창에 특정 웹 페이지의 주소를 입력했을 때,어떤 과정을 통해 데이터가 전달되고, 화면에 렌더링되는지를 이해하시려면~ 🧮 데이터를 받아오는 과정 1. www.google.com 입력하면 입력한 URL 주소 중, 도메인 이름에 해당하는 google.com를 DNS 서버에서 검색을 합니다. 2. 가장 가까운 DNS 서버에서 해당 도메인 이름에 해당하는 IP주소를 찾아 사용자가 입력한 URL 정보와 함께 전달을 합니다. 3. 전달받은 IP주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트에 맞는 html문서를 요청합니다 4. WAS와 데이터베이스에서 웹페이지 작업을 처리합니다. 5. WAS에서의 작업 처리 결과들을 웹 서버로 전송하고, 웹 서버는 웹 브라우저에게 html 문서 결과를 전달합니다. 🖥 브라우저 렌더링 과정 6. Critical Rendering Path를 통해 웹 브라우저 화면에 웹 페이지 내용을 출력합니다. 7. DOM 트리 빌드 - 이전 단계에서 통신을 통해 받아온 HTML 파일들은 바이트 형태로 전달. 바이트 -> 문자 -> 토큰 -> 노드 -> 객체 모델로 전환하는 작업 수행 8. CSSOM 트리 빌드 - CSSOM 트리 형태를 만듬으로써 특정 객체에 최종 스타일을 계산할 때 상위 객체의 스타일을 하향식 규칙을 적용하는 방식으로 계산되는 스타일을 재귀적으로 세분화 9. Render Tree 생성 - 기존에 제작된 DOM과 CSSOM을 결합하여 Render Tree를 생성 10. Layout Render Tree의 노드들에 대한 위치와 크기를 계산하는 단계 11. Paint - 계산된 값들을 기반으로 화면에 필요한 요소들을 실제로 그리는 작업 실행 11.5. Reflow & Repaint - 특정 액션과 이벤트에 따라 html의 요소의 크기나 위치의 크기를 변경해야 하는 경우 12. Composition - 레아아웃과 페인트를 수행하지 않고 레이어의 합성만 실행시키는 단계 13. www.google.com 맞는 화면이 웹 브라우저에 출력됩니다. >> 보다 상세 내용과 그림은 원문 링크 클릭!!