Browser의 동작 (웹 브라우저 렌더링)

브라우저의 동작방식은 원래는 개발자 몫이 아닌, 브라우저만의 영역이었습니다.
최근에는 개발자도 브라우저 렌더링을 이해해야 하는 추세입니다. 왜냐, 속도를 높이기 위해서죵~^.^

 

브라우저란?

브라우저는 사용자가 서버에 요청한 내용을 받아 사용자가 볼 수 있도록 표시하는 역할을 합니다.
브라우저는 서버로부터 받아온 HTML파일을 해석해서 우리가 항상 사용하는 그런 웹페이지가 되는것입니다!

 

브라우저의 기본 구조

우리가 자주 사용하는 웹브라우저는 Google Chrome, IE, Safari 등이 있고
조금씩은 다르지만 브라우저의 주요 구성요소는 아래와 같습니다.

• User Interface: 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 보는 화면
• Browser Engine: 사용자 인터페이스와 렌더링 엔진 사이 동작 제어
• Randering Engine : HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
• Network: HTTP요청과 같은 네트워크 호출에 사용됨
• Java Script Interpreter: 자바스크립트 코드를 해석하고 실행
• UI Backend: 기본적인 위젯(콤보 박스 등)을 그림
• Data Persistence: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스

 

렌더링 엔진이란?

웹 렌더링 엔진, 웹브라우저 엔진, 웹 레이아웃 엔진 등 여러 이름으로 불리는데,
웹페이지에 대한 컨텐츠 및 데이터를 보여주는 역할을 합니다.
즉, 브라우저에 화면을 표시해주는 역할을 합니다.

브라우저마다 다른 렌더링 엔진을 사용합니다.
Internet Explorer는 Trident, Firefox는 Gecko, Safari는 WebKit을 사용하고, 
Chrome과 Opera는 WebKit의 포크 인 Blink를 사용합니다.

렌더링 엔진의 동작 과정을 보자면,
렌더링 엔진은 네트워킹 계층에서 요청 된 문서의 내용을 가져와서 DOM트리를 생성합니다. (CSS의 경우 CSSOM).
DOM을 이용해서 Render Tree를 만들고, 배치합니다. (각 노드가 화면의 정확한 위치에 표기되기 위해 계산 하는 과정)
마지막으로 계산한 대로 화면에 그리는것이죠!

• 파싱- HTML, CSS문자단위로 하나하나 다 해석해서 문장이 가진 의미를 파악하는것
• DOM - Documemt Object Medel의 줄임말로 일종의 트리 모양으로 데이터를 가지고 있음
• Rander Tree - HTML + CSS 합친것 

더욱 자세히는 다음번에 알아보도록 하겠습니다 ㅎㅎㅎㅎ 
다음에 만나용 빠잉~~

 

💁 How Browser Work?
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/

💁 렌더링
https://velog.io/@codenmh0822/%EB%A0%8C%EB%8D%94%EB%A7%81Rendering

💁 Web Server-Clinet 커뮤니케이션 이해
https://hackernoon.com/http-made-easy-understanding-the-web-client-server-communication-yz783vg3