브라우저에 웹 페이지를로드하는 데 필요한 모든 것을 궁금해 한 적이 있습니까? 인터넷 연결에 따라 웹 페이지의 URL 또는 주소를 입력하고 "Enter"버튼을 누르면 거의 즉시 해당 웹 페이지로 이동합니다. 연결 속도가 느린 경우 속도가 느려질 수 있지만 여전히 비교적 빠른 페이지로 이동할 수 있습니다. 그 모든 일이 일어나도록 무대 뒤에서 무슨 일이 일어나고 있습니까? 아래를 따라 가면 진행 상황을 보여 드리겠습니다!
서버 간 브라우저 통신
평신도의 용어로, 주소 표시 줄에 링크를 입력하거나 페이지의 링크를 클릭하면 브라우저는 주소가 호스팅되는 서버에 요청합니다. 여기에서 페이지의 자원이 다운로드되고 브라우저는 해당 자원을 사용하여 페이지를 렌더링하고 최종 제품을 표시합니다.
그래도 그보다 조금 더 복잡합니다.
URL에 대한 간단한 단어
www.google.com과 같은 URL을 입력하면 이것이 바로 표시되는 것입니다. 컴퓨터가 다른 것을 본다. 입력 한 후 Enter 키를 누르면 DNS (Domain Name Server)를 통과하여 컴퓨터가 읽을 수있는 IP 주소로 변환됩니다. www.google.com을 볼 수 있지만 브라우저는이를 가져 와서 DNS 서버를 통과 한 다음 실제로 216.58.216.110 과 같은 Google의 많은 IP 주소 중 하나에 연결합니다. 주소 표시 줄에 216.58.216.110 을 입력하고 같은 위치에있을 수 있습니다.
브라우저에서 웹 페이지 얻기
브라우저에 웹 페이지를 올바르게 표시하기 위해 움직이는 부분이 많이 있습니다. 그러나 첫 번째 단계는 요청입니다. www.techjunkie.com과 같이 방문하려는 사이트의 주소를 입력 할 때 웹 서버에 요청합니다. Enter 키를 누르면 브라우저가 웹 호스트에 연결하고 여러 텍스트 파일을 다운로드하도록 요청합니다.
다음 단계는 웹 서버의 응답입니다. 서버가 실제로 리소스를 브라우저에 제공하는 단계입니다. 브라우저는 요청 (요청)하고 서버는 요청을 보냅니다 (응답). 그러나 브라우저가 단일 파일 이상이 필요한지 어떻게 알 수 있습니까? 파싱 (parsing)이라는 것을 통해이 작업을 수행합니다. 즉, 브라우저는 첫 번째 문서를 가져 와서 다른 파일에 대한 참조를 찾습니다. 다른 파일에 대한 참조가 있으면 다운로드합니다. 그것보다 훨씬 더 복잡하지만 필요한 파일을 찾는 방법의 요지입니다.
다음으로 다운로드 한 모든 정보를 작성해야합니다. 다운로드 한 원본 HTML 문서와 모든 관련 리소스를 가져 와서 일종의 구조 또는 트리를 만듭니다. 먼저 페이지에서 요소의 구조 또는 배치 인 DOM (Document Object Map)을 먼저 빌드합니다. 다음으로 CSS 객체 맵 (DOM의 요소 스타일 지정 구조)을 작성합니다. 마지막으로 렌더 트리를 작성합니다. 기본적으로 DOM과 CSS 오브젝트 맵을 가져 와서 결합하고 페이지의 구조와 스타일을 지정하는 구조를 만듭니다.
마지막으로 페이지가 렌더링되어 사용자에게 표시됩니다. 이 단계에서는 브라우저가 화면을 기준으로 레이아웃의 크기를 파악해야하기 때문에 계산이 많이 있습니다 (예 : 태블릿, 스마트 폰 또는 컴퓨터의 경우 페이지 크기가 다름). 그러나 일단 그렇게되면 브라우저에 최종적이고 잘 보이는 페이지가 표시됩니다.
이 과정은 실제로 놀랍습니다. 물론 이러한 모든 요청과 계산은 인터넷 연결 속도에 따라 몇 초 안에 이루어집니다. 그러나 대부분 웹 페이지에 수백 개의 파일이있을 수 있지만 위의 프로세스는 10 초 이내에 쉽게 발생합니다.
폐쇄
인터넷 연결, 브라우저 및 서버가 모두 함께 작동하여 웹 페이지를 브라우저로 바로 전달하는 방법을 분명히 설명했으면합니다. 이러한 모든 기술이 서로 얽히고 함께 작동하는 방식에 대해 심도있게 이해하면이면에서 발생하는 일에 대해 더 잘 이해할 수있을뿐만 아니라 브라우저 관련 문제를 해결하는 데 도움이 될 수 있습니다.
