[웹 기본개념] 브라우저 동작원리

[목표]

- 브라우저가 어떻게 동작을 하는지 알아보기

- 내부 동작을 알아봄으로서 속도 개선을 위해 무엇이 필요한지 알아보기

- 동작 매커니즘을 아는 것이 프로젝트를 짤 때 이해도가 더 깊어지는 것을 알기

- 리액트 필요성 느끼기 : DOM에 대해 공부하면서, html 문서 파싱 단계를 보면서

[브라우저 기본 구성요소 및 각각의 역할]

(1) 유저인터페이스 : 사용자가 기능을 쉽게 이용할 수 있도록 만든 UI 요소들(주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등)

(2) 브라우저 엔진 : 유저인터페이스와 랜더링 엔진 사이의 동작을 제어함

(3) 랜더링 엔진

- 요청한 콘텐츠를 표시할 수 있도록 하는 역할, 사용자가 HTML 파일을 요청하면 HTML과 CSS를 파싱(응답 파일)하여 화면에 표시해줌

- 크롬은 각 탭마다 별도의 랜더링 엔진 인스턴스를 유지함, 각 탭은 독립된 프로세스로 처리(그래서 탭이 늘어날수록 시스템 성능 저하가....)

(4) 통신 : 네트워크 호출에 사용됨

(5) UI 백앤드 : 브라우저의 기본 장치(창, 콤보박스 등)를 그릴 때 사용함, OS에 따라 UI가 바뀜

(6) 자바스크립트 해석기 : 자바스크립트 코드를 파싱하고 실행하는 역할

(7) 자료 저장소 : 쿠키와 같은 자료들을 저장하는 계층

[가장 중요한 랜더링엔진 : 리액트 배움과 관련해서]

- 랜더링엔진 역할 : 사용자가 요청한 내용을 서버로부터 받아 브라우저 화면에 표시하는 역할을 함

- 랜더링엔진을 통해 표시할 수 있는 것

(1) 기본 : HTML 및 XML 문서 그리고 이미지를 표시할 수 있음

(2) 확장 : 플러그인이나 브라우저마다 확장 기능을 이용해 PDF와 같은 유형도 표시할 수 있음

(3) 종류 : 사파리, 크롬은 웹킷(Webkit)엔진(크롬은 28버젼부터 Blink) / 파이어폭스는 모질라에서 만든 게코(Gecko)엔진

(4) 동작과정

(4-1) 통신으로부터 요청한 문서의 내용을 얻음 - 로더가 로딩(단순 로딩이 아닌 이미 읽은 것인지 판단, 팝업창 띄울지 등을 판단)

(4-2) HTML 문서 파싱 : 서버로부터 받은 문서를 브라우저가 이해하고 사용할 수 있는 구조(DOM트리)로 문서를 변환하여 반환하는 과정

- 위의 이미지와 같은 구조로 변환함

- 브라우저 화면에 랜더링하기위해 다루기 쉬운 구조로 바꿈 : 브라우저가 사용할 수 있는 구조(객체형태, 객체의 구조화 - 레이어)

- DOM API는 문서 태그(마크업 문서)를 객체로 바꿔주는 API(문서를 표현하고 저장하고 조작하는 표준 방법)

 

- 각각의 태그를 객체로 바꿔줌으로서 객체(태그)를 제어하거나 변경 등이 가능해짐

- 잘못된 제작을 했다하더라도 파서가 오류를 수정해줌(예시 : head를 빠뜨렸다고해도 암묵적으로 head 엘리먼트 객체를 만들어줌)

- 객체가 가진 프로퍼티, 메소드를 통해서 다양한 것들을 할 수 있고 얻어올 수 있음

- 탐색하기에는 쉽지만, 구조 속에서 일일이 찾고 구조를 변경하고 다시 그려야하기때문에 빠르지 않음(싱글페이지 어플리케이션, 많은 이벤트 핸들러가 있고 이벤트 핸들러에 의해 DOM 구조가 바뀜 == 가상돔!)

- .html 문서 내에 사용하는 html 태그 종류들은 HTMLElement의 자식이고, HTMLElement는 Element의 자식이고 최상위에는 Node가 있음

- 이런 구조를 DOM 트리라함(DOM API를 통해서 변환된 객체들의 구조)

- 받은 .html 문서 파일을 구조화하여 브라우저가 이해할 수 있도록 하는 것이 랜더링엔진때문이였음

- DOM 을 통해 문서의 구조화된 표현(객체) 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공함

    => DOM 은 구조화시키면서, 구조화된 표현을 프로그래밍 언어가 접근하여 다룰 수 있도록 지원까지 함(보통 자바스크립트 활용)

(4-3) CSS 파일 파싱 

- css 모든 정보를 스타일 구조체로 생성함

- 이를 CSSOM 트리라 함

- 없을 경우에 기본적으로 브라우저가 정한 css 값이 정의되는 것 같음 

(4-4) 4-2 결과 중 일부와 4-3 결과를 결합하여 랜더링 트리를 생성함 : 문서의 시각적인 요소가 포함된 형태를 갖게됨

- 랜더링 트리는 표시되는 각 요소의 레이아웃을 계산하는데 사용됨

- DOM 트리는 내용 자체를 저장하고 있고, 화면에 표시하기위한 위치, 크기, 그리기 순서 저장을 위한 별도의 트리 구조가 필요함

- DOM 요소 중 시각적 요소와 관련된 요소(head와 같은 비시각요소는 포함x)와 CSS 파싱 내용을 합쳐 페이지 랜더링에 사용하는 새로운 트리를 만듬

- 랜더트리는 박스모델을 포함하고 있음

(4-5) 배치를 함, 화면의 정확한 위치에 표시

(4-6) UI 백엔드가 화면에 그리기 과정을 함(패인팅)

- 랜더링 트리를 탐색하면서 특정 메모리 공간에 RGB 값을 채우는 과정

(4-7) 화면에 표시

- 랜더링엔진은 위의 모든 단계를 점진적으로 함

- 그러나 좀 더 나은 사용자경험을 위해 가능하면 빠르게 브라우저 화면에 표시하려고 함

- 이를 위해 HTML 문서 파싱을 모두 다하고 다음 과정들로 넘어가는 것이 아님

- 일부 한 만큼 배치와 그리기 과정(랜더링 트리를 만들고)을 시작함

- 네트워크 단으로부터 나머지 내용이 전송되기를 기다리는 동시에 받은 내용 일부를 먼저 화면에 표시하려고 함

- 각 브라우저가 사용하는 랜더링 엔진별로 조금씩 추가되거나 명칭의 차이가 있긴하지만 기본적으로 위의 과정과 같음

[참고자료] 

(1) 네이버 d2 : http://d2.naver.com/helloworld/59361

(2) 구글 개발자센터(랜더링 트리) : https://goo.gl/OjM6wx

(3) 티스토리 무하프로젝트 :  https://goo.gl/3YvztK

(4) 생활코딩 Element : https://opentutorials.org/module/904/6681

(5) MDN DOM에 대하여 : https://developer.mozilla.org/ko/docs/About_the_Document_Object_Model

(6) github FEDevelopers 가상돔과 돔의 차이점 : https://goo.gl/dUU8Sl 

(7) slideshare 브라우저 동작원리 : https://www.slideshare.net/JinKyoungHeo/1-2-53043752