ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 웹 브라우저의 구성과 동작 방식
    프론트엔드/프론트엔드 이론 2020. 9. 18. 00:30

    웹 브라우저란?

    인터넷을 통해 웹서버의 모든 정보를 볼 수 있게하고 HTML 검색을 돕는 응용 프로그램이다.

     

    웹 브라우저의 동작 방식

    웹 브라우저는 인터넷 웹 서벗에 자료를 요청하기 위한 클라이언트 프로그램이다.

     

    그림으로 나타내면 다음과 같다.

     

     

    유저가 웹사이트에 접속하기 위해 브라우저에 주소를 입력한다.

     

    그러면 브라우저는 주소에 맞는 웹 서버에 웹사이트 자료를 요청한다.

     

    웹서버는 브라우저의 요청에 맞는 각종 웹사이트에 관련된 자료를 제공한다.

     

    브라우저는 이 웹서버가 제공한 자료를 해석하고 화면에 구현하여 유저에게 정보를 제공한다.

     

    실제로 우리가 보는 화면은 서버에서 바로 받아서 그 페이지를 그대로 보여주는 것이 아니다.

     

    페이지는 화면 구현에 필요한 코드, 이미지를 브라우저로 보내고 브라우저는 그것을 해석해서 화면에 표시한다.

     

    브라우저의 동작 상세

    위에서 브라우저의 역할은 매우 중요하다.

     

    브라우저가 문제가 있다면 서버 제대로 된 정보를 요청하지도, 해석하지도 못할 것이기 때문이다.

     

    위의 브라우저 동작은 아주 간단하게 전체적인 관점에서 설명한 것이다.

     

    자세히 들어가면 다음과 같다.

     

    1. 브라우저를 통해 사용자가 URL 입력하고 브라우저는 이를 통해 서버에 접속 후 페이지 정보 요청

     

    2. HTML, 이미지 등이 서버에서 브라우저로 전송됨

     

    3. 브라우저는 받은 소스 중 HTML과 CSS 문서를 렌더링 엔진을 통해 해석함

     

    4. 렌더링 엔진은 우선 HTML 파서를 통해 HTML에 대한 파싱을 진행한다.

     

    5. 이때 HTML: 파서는 W3C에 의해 정해진 규칙에 따라 HTML의 어휘와 문법을 파싱한다.

     

    6. 이렇게 파싱된 내용을 토대로 DOM 트리라는 문서가 구조화된 문서 객체 모델을 생성한다.

     

    7. CSS 문서에 대해 렌더링 엔진은 CSS파서를 통해 해석한다.

     

    8. 이제 렌더링 엔진은 DOM 트리와 해석된 CSS를 결합해 렌더트리란 것을 만든다.

     

    9. 렌더트리는 표시해야 할 순서와 시각적 구성요소로써 올바른 순서를 내용을 그리기 위해 만든다.

     

    10. 렌더링 엔진은 렌더트리를 참조해 요소들을 화면에 배치(Layout)하고 그 내용을 그려(Painting)낸다.

     

    이 바로 웹 브라우저가 정보를 요청한 유저에게 정보를 표현하는 방식이다.

     

    간단히 말하면 서버 정보 받아와서 해석하고 적절히 합쳐서  표현하는 것이다.

     

     

    '프론트엔드 > 프론트엔드 이론' 카테고리의 다른 글

    자바스크립트 엔진(JavaScript Engine)  (0) 2020.09.18
    렌더 트리 (Render Tree)  (0) 2020.09.18
    CSSOM(CSS Object Model)  (0) 2020.09.18
    DOM(Document Object Model)  (0) 2020.09.18
    브라우저 엔진  (0) 2020.09.18
Designed by Tistory.