웹 브라우저 작동 방식 - 데이터 가져오기(2부, 그림 포함)🚀

7044 단어 javascripthtmlcsstutorial
navigation에 대해 이야기한 지난 기사에서 브라우저가 웹 사이트를 표시하기 위해 취하는 첫 번째 단계입니다. 오늘은 다음 단계로 이동하여 방법resources get fetched을 살펴보겠습니다.

2. 데이터 가져오기



HTTP 요청



서버와 보안 연결을 설정한 후 브라우저는 초기HTTP GET request를 보냅니다. 먼저 브라우저는 페이지에 대한 마크업( HTML ) 문서를 요청합니다. HTTP 프로토콜을 사용하여 이 작업을 수행합니다.

HTTP (Hypertext Transfer Protocol) is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser.





방법 - 예: POST, GET, PUT, PATCH, DELETE 등
URI - Uniform Resource Identifier 를 나타냅니다. URI는 인터넷에서 추상 또는 물리적 리소스, 웹사이트 또는 이메일 주소와 같은 리소스를 식별하는 데 사용됩니다. URI는 최대 5개 부분으로 구성될 수 있습니다.
  • 구성표: 사용 중인 프로토콜을 나타내는 데 사용됨
  • 권한: 도메인 식별에 사용
  • path: 리소스에 대한 정확한 경로를 표시하는 데 사용됨
  • 쿼리: 요청 작업을 나타내는 데 사용됨
  • 조각: 리소스의 일부를 참조하는 데 사용

    • // URI parts
scheme :// authority path ? query # fragment

//URI example
https://example.com/users/user?name=Alice#address

https: // scheme name
example.com // authority
users/user // path
name=Alice // query
address // fragment

    HTTP 헤더 필드 - 모든 HTTP 요청 및 응답에서 브라우저와 서버 모두에서 보내고 받는 문자열 목록입니다(일반적으로 최종 사용자에게는 보이지 않음). 요청의 경우 가져올 리소스 또는 리소스를 요청하는 브라우저에 대한 자세한 정보가 포함됩니다.

    이 헤더가 어떻게 보이는지 보려면 Chrome으로 이동하여 개발자 도구(F12)를 엽니다. 네트워크 탭으로 이동하여 FETCH/XHR를 선택합니다. 아래의 스크린샷에서 방금 Google에서 Palm Springs를 검색했으며 요청 헤더는 다음과 같습니다.


    HTTP 응답



    서버가 요청을 받으면 이를 처리하고 HTTP response 로 응답합니다. 응답 본문에 첨부된 모든 관련 헤더와 요청한 HTML 문서의 내용을 찾을 수 있습니다.



    상태 코드 - 예: 200, 400, 401, 504 Gateway Timeout 등
    응답 헤더 필드 - 위치 또는 응답을 제공하는 서버와 같은 응답에 대한 추가 정보를 보유합니다.
    200 문서의 예는 다음과 같습니다.

    <!doctype HTML>
<html>
 <head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>This is my page</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="mainScripts.js"></script>
</head>
<body>
  <h1 class="heading">This is my page</h1>
  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
  <div>
    <img src="myImage.jpg" alt="image description"/>
  </div>
  <script src="sideEffectsScripts.js"></script>
</body>
</html>


    앞에서 언급한 동일한 Google 검색의 경우 HTML는 다음과 같습니다.



    HTML 문서를 살펴보면 서로 다른 reponse headers 및 CSS 파일을 참조한다는 것을 알 수 있습니다. 이러한 파일은 브라우저가 이러한 링크를 만나지 않을 때까지 요청되지 않지만 이 단계에서는 발생하지 않지만 다음 문서에서 논의할 Javascript 단계에서는 발생합니다. 이 시점에서 HTML만 요청되어 서버에서 수신됩니다.

    이 초기 요청에 대한 응답에는 수신된 데이터의 첫 번째 바이트가 포함됩니다. parsing (TTFB)는 사용자가 요청(주소 표시줄에 웹 사이트 이름 입력)을 한 시점과 HTML의 첫 번째 패킷(일반적으로 14kb)을 수신한 시점 사이의 시간입니다.

    TCP 느린 시작 및 정체 알고리즘


    Time to First Byte는 네트워크 연결 속도의 균형을 맞추는 알고리즘입니다. 첫 번째 데이터 패킷은 14kb(또는 더 작음)이며 작동 방식은 미리 결정된 임계값에 도달할 때까지 전송되는 데이터의 양이 점진적으로 증가하는 것입니다. 각 데이터 패킷이 서버에서 수신된 후 클라이언트는 TCP slow start로 응답합니다. 연결 용량이 제한되어 있기 때문에 서버가 너무 많은 패킷을 너무 빨리 보내면 패킷이 삭제됩니다. 클라이언트는 아무것도 보내지 않으므로ACK message 서버는 이를 혼잡으로 해석합니다. 이것은 ACK messages가 작동하는 곳입니다. 전송된 패킷 및 ACK 메시지의 흐름을 모니터링하여 최적의 트래픽 속도를 결정하고 안정적인 트래픽 스트림을 생성합니다.

    참조 자료:
  • MDN Web Docs
  • MDN Web Docs
  • KeyCDN
    • 스프링 - @RequestBody 및 @ResponseBody
    Node.js를 사용하여 중재자 봇 만들기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage