IT 백과사전/WEB 관련

WEB | 브라우저 렌더링 방법

Kim_gorilla 2020. 6. 5. 22:56

 

👨‍💻 브라우저 렌더링 방법?

 

시작하기 앞서 본 포스팅 내용은 NaverD2에서 포스팅한 내용과 기타 블로그의 내용을 공부하여 제 나름대로의 해석한 내용을 포함시킨 글입니다. 잘못된 내용이 있거나 기타 질문사항은 언제나 환영이며 댓글을 이용해 주시기바랍니다. : )

참고사이트

 

우리가 브라우저가 렌더링하는 방법에 대하여 공부하기 전에 브라우저란 무엇인지부터 알아보도록 하겠습니다. (아래는 위키백과에서 발췌해온 내용입니다.)

웹 브라우저 또는 브라우저(영어: web browser 또는 browser, 문화어: 열람기)는 웹 서버에서 이동하며(navigate) 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다.

주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지,[1][2][3] 오페라, 사파리가 있다.

요약하자면, 유저를 대신해 서버로부터 데이터를 보내거나 받아주고 또, 받아온 정보(데이터)를 GUI를 통해서 유저에게 보여주는 존재입니다.

 

여기서 우리가 알아볼 정보는 총 세가지 입니다. 

  1. 브라우저는 데이터를 어떻게 받아 오는가?
  2. 브라우저는 데이터를 어떻게 전송하는가?
  3. 브라우저는 서버로부터 받아온 데이터를 화면에 어떤 방식으로 렌더링하는가?

차근차근 하나씩 공부하여 알아보도록 하겠습니다.

🐵 브라우저는 데이터를 어떻게 주고 받는가?

기본적으로 우리가 브라우저를 이용하여 서버와 데이터를 주고 받을때에는 HTTP라는 통신규약(프로토콜)을 이용하여 받아오게 됩니다.

(여기서 프로토콜이 무엇인지는 언급하지 않겠습니다)

 

그렇다면 HTTP를 통해 데이터를 받아오는 과정은 어떨까요?

 

서버와 브라우저가 데이터를 주고 받기는 이 과정을 Request(요청) 과 Response(응답)이라고 표현합니다. 이러한 방식을 Client-Server 방식이라고 부르는데요, 즉 서버에게 나 "~이런정보가 필요해 혹은 가져왔으니 받아줘" 라는 Request(요청)을 하면 서버가 요청을 이해하고 그에 알맞는 Response(응답)을 해주는 것입니다.

 

여기서 우리의 요청이 특정 서버에게 잘 도착하게 하기 위해서 브라우저의 URL에 해당 서버의 IP 주소 혹은 도메인 네임을 적어서 요청하게 됩니다. 그러면 우리의 컴퓨터(운영체제)는 일종의 요청서에 해당하는 Packet이라는 데이터를 만들어 그 안에 도착지(서버주소)와 자신의 IP주소를 적어 라우터에게 전달하게 됩니다.

(여기서부터 서버까지 도달하는 일은 라우터가 우리가 만든 해당 Packet을 해석해서 알아서 전달해주게 됩니다.)

 

서버에서는 요청받은 Packet안에서 보낸이의 IP주소를 추출해 기억해 두었다가 응답데이터를 만들어 방금전에 추출한 IP주소로 응답데이터를 보내주게 됩니다.

 

(사실 이과정에서 바로 데이터를 보내주는것이 아니라 3Hand Shake라는 과정을 거쳐 서로가 네트워크 연결이 잘 되어있는지 확인하는 절차를 거친 후에 데이터를 주고 받습니다.)

 

🐵 브라우저 렌더링 방법은?

렌더링이란 논리적인 문서의 표현식을 그래픽 표현식으로 변형시키는 과정입니다. 즉 브라우저 렌더링은 서버로부터 받은 문서 혹은 파일을 그래픽 표현식으로 변형시켜주는 과정이라 볼 수 있겠습니다.

 

여기서 브라우저가 어떻게 렌더링을 하는것인가를 알아보기 전에 브라우저가 어떤 구조로 되어있는지 부터 알아보고 이야기를 시작하도록 하겠습니다.

 

브라우저는 아래의 내용으로 구성되어있습니다.

 

  1. 사용자 인터페이스 - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.

  2. 브라우저 엔진 - 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어.

  3. 렌더링 엔진 - 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.

  4. 통신 - HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.

  5. UI 백엔드 - 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.

  6. 자바스크립트 해석기 - 자바스크립트 코드를 해석하고 실행.

  7. 자료 저장소 - 이 부분은 자료를 저장하는 계층이다. 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장할 필요가 있다. HTML5 명세에는 브라우저가 지원하는 '웹 데이터 베이스'가 정의되어 있다.

 

아래의 사진을 보면 더 이해가 잘될텐데요,

(Naver D2 페이지에서 발췌한 사진입니다.)

Naver D2 페이지에서 발췌

즉 우리가 더 깊게 알아봐야할 부분이 렌더링 엔진! 이라는 겁니다. 브라우저가 "렌더링 엔진" 이라는 것을 이용해 렌더링을 수행하는 것인거죠.

 

렌더링 엔진

 

그럼 렌더링 엔진에 대하여 알아보겠습니다.

 

렌더링 엔진의 종류에는 파이어폭스를 만든 모질라에서 직접 제작한 게코엔진과 사파리와 크롬에서 사용되어지고 있는 웹킷엔진이 있습니다. 

 

이러한 렌더링 엔진의 역할은 요청 받은 내용을 브라우저 화면에 표시하는 일입니다.

 

여기서 요청받아 표시하는 정보들에는 HTML, CSS, JS들이 있고 플러그인이나 브라우저 확장 기능을 이용해 PDF와 같은 다른 유형도 표시가 가능합니다.

 

자 이제 렌더링 엔진이 동작하는 과정을 살펴보겠습니다. 

 

렌더링엔진은 통신으로부터 요청한 문서의 내용을 얻는 것으로 시작하는데 문서의 내용은 보통 8KB 단위로 전송되어집니다.

 

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 합니다. Understanding the Critical Rendering Path 에서 다루듯이 이 과정은 여러 단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있습니다.

  • 첫 번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정합니다.
  • 그리고 두 번째 단계에서 브라우저는 해당 렌더링을 수행합니다.

참고사이트

 

위에서 언급한 두 단계를 아래의 사진을 통해 조금 더 자세하게 살펴보도록 하겠습니다.

(Naver D2 페이지에서 발췌한 사진입니다.)

 

[DOM트리 구축을 위한 HTML 파싱]

렌더링 엔진은 위에서 언급한 첫 번째 단계에 해당하는 HTML 문서를 파싱을 하고 "콘텐츠 트리"(DOM트리) 내부에서 태그를 DOM 노드로 변환합니다.

그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱하는 과정을 거칩니다. 

[렌더 트리 구축]

이때, 스타일 정보와 HTML 표시 규칙은 "렌더 트리"라고 부르는 또 다른 트리를 생성하게 됩니다.

렌더 트리는 색상 또는 면적과 같은 시각적 속성이 있는 사각형을 포함하고 있는데 정해진 순서대로 화면에 표시됩니다.

[렌더 트리 배치]

렌더 트리 생성이 끝나면 배치가 시작되는데 이것은 각 노드가 화면의 정확한 위치에 표시되는 것을 의미합니다.

 

다음은 UI 백엔드에서 렌더 트리의 각 노드를 가로지르며 형상을 만들어 내는 그리기 과정입니다.

 

일련의 과정들이 점진적으로 진행된다는 것을 아는 것이 중요합니다. 렌더링 엔진은 좀 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작합니다. 네트워크로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용의 일부를 먼저 화면에 표시하는 것입니다.

 

아래의 사진은 렌더링 엔진 별 동작과정을 나타낸 이미지입니다.

(Naver D2페이지에서 발췌)

웹킷 동작 과정
모질라의 게코 렌더링 엔진 동작 과정

웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 위의 그림들을 통해 알 수 있습니다.

 

게코는 시각적으로 처리되는 렌더 트리를 "형상 트리(frame tree)"라고 부르고 각 요소를 형상(frame)이라고 하는데 웹킷은 "렌더 객체(render object)"로 구성되어 있는 "렌더 트리(render tree)"라는 용어를 사용합니다. 웹킷은 요소를 배치하는데 "배치(layout)" 라는 용어를 사용하지만 게코는 "리플로(reflow)" 라고 부릅니다. "어태치먼트(attachment)"는 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정입니다. 

 

참고사이트

 

 

저작자표시 비영리