브라우저, 그리고 동작 방식

jonghyuck’s velog·2021년 5월 7일
0

1. ✅ 주요 기능

2. 🧐 브라우저의 구성

3. ✅ 렌더링 엔진의 작동 방식

4. ✍️ 동작 과정

5. ✅ 통신

우리는 매일 휴대폰, 노트북을 통해서 인터넷을 사용하고 이는 브라우저를 통해서 이루어지는 행동이다. 브라우저가 뭔지 모르는 사람도 있다면 우리가 인터넷을 사용하기 위해서 누르는 크롬, 익스플로러, 사파리등이 모두 브라우저라는 프로그램이다.

브라우저는 사용자가 보고자 하는 페이지를 서버에 요청하고 서버에서 받은 응답을 브라우저에 표시해주는 것이다.

🥸 특히 예전에는 브라우저를 통한 작업이 제한적이었던 반면 최근에는 브라우저를 통한 서비스가 증가되는 추세이기에 더욱이 중요하다!
👉 브라우저는 기기의 os에 구해받지 않을 수 있는 수단으로 많이 쓰이기 때문이다.


1. ✅ 주요 기능

브라우저는 HTML 과 CSS 면세에 따라 HTML 파일을 해석해서 표시하며 이는 웹 표준화 기구인 W3C (World Wide Web Consortium) 에서 정한다. 이는 과거에 브라우저들이 일부 명세만 따르고 독자적인 방법으로 브라우저를 확장시킴으로써 호환성에 심각한 문제를 겪으며 최근에 와서는 대부분의 브라우저가 W3C의 표준 명세를 따르게 되었다.

현재 대부분의 브라우저는 서로의 장점을 모방하며 발전해왔고 현재와 같은 모습이 되었다. HTML5의 명세를 살펴보면 주소표시줄, 상태표시줄, 도구 모음과 같은 범용적인 요소를 제외하면 필수 UI를 정의하지 않았으며 각 브라우저는 이 표준외에 각자만의 특화된 기능을 통해서 사용자를 유치하고 있다고 할 수 있다.

👆요점 정리

  • 브라우저는 사용자의 요청에 따라 서버에 웹페이지를 요청하고 응답(HTML,CSS)을 사용자에게 보여주는 프로그램이다.
  • HTML과CSS파일은 코드로 존재하고 사용자의 요청에 따른 응답을 브라우저가 시각적으로 변환하여 보여준다.
  • 최근의 브라우저는 대부분 W3C의 표준을 따르고 HTML5의 명세에 따라 주소표시줄, 상태표시줄, 도구 모음과 같은 범용적인 요소를 제외한 각 브라우저만의 장점을 부각시켜 사용자를 유치한다.

출처 : HTML5rocks (HTML5 브라우저의 특징)
위 링크를 브라우저에 대한 상세한 설명이 나와있는데, 한번 살펴보도록 하자.


2. 🧐 브라우저의 구성

  1. 사용자 인터페이스 : 이전, 다음, 새로고침, 북마크와 같이 페이지를 보여지는 부분 외에 브라우저를 사용하는 모든 유저에게 동일하게 보이는 부분

  2. 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이에 쿼리를 전달할 수 있게 조작(제어)

  3. 렌더링 엔진 : 사용자가 요청한 페이지를 화면에 나타내기 위해 HTML과 CSS를 분석

  4. 통신 : HTTP를 요청하고 네트워크 호출에 사용

  5. 자바스크립트 해석기 : javascriopt 코드를 해석 및 실행

  6. UI 백엔드 : 기본적인 UI들을 그리는데 사용, 보통은 콤보 박스와 창 같은 기본적인 장치를 그림

  7. 자료 저장소 : 쿠키와 같은 자료를 저장

이렇게 크게 7가지 구성으로 이루어진 브라우저중 가장 중요한 것은 어디일까? 바로 웹 서버로부터 응답받은 내용을 UI 상에 나타내주는 Rendering engine일 것이다. 따라서 어떻게 렌더링 엔진이 작동되는지 알아볼 필요가 있다.


3. ✅ 렌더링 엔진의 작동 방식

브라우저가 여러개 있다면 모든 브라우저가 동일한 렌더링 엔진을 사용할까? 그렇지 않다. 대부분의 브라우저들은 각자의 렌더링 엔진들을 사용하며 이 엔진에 따라 브라우저의 성능이 달라지기도 한다.

Firefox : 모질라에서 만든 Gecko 엔진
Safari & Chrome : Webkit 엔진(opensource)

대표적으로는 위와 같은 엔진이 존재하며 렌더링 엔진은 다를지라도 동작과정은 비슷하다.


4. ✍️ 동작과정

  1. HTML파싱 후 돔트리 구축

  2. 렌더 트리 구축

  3. 렌더 트리 배치

  4. 렌더 트리 그리기

1.HTML파싱 후 돔트리 구축2.렌더 트리 구축3.렌더 트리 배치4.렌더 트리 그리기
HTML 파서는 HTML 마크업을 파싱 트리로 변환한다.DOM(Document Object Model)은 마크업과 1:1 관계를 맺는다.CSS/style 요소들을 파싱하여 트리형태로 구성한다.내용을 어떻게 보여줄지(시각적)를 구조화한다.어떤 공간에 위치할지를 정한다. 레이아웃.UI 백엔드가 각 노드들을 그린다.

5. 통신(간략히)

  • HTTP/ HTTPS
    • HTTP : 웹표준 통신규약
    • HTTPS : 통신에 들어가는 데이터들을 암호화한 상태로 통신

0개의 댓글