브라우저 작동 원리를 내가 왜 알아야하지?? 🧐
그동안 개발 공부를 하면서 브라우저 작동원리에 대해 브라우저가 알아서 다 해주기 때문에 굳이 알려고 하지 않았다.
나의 코드가 특정 브라우저에서 잘 돌아가는 이유는 무엇일까?
나의 코드가 더 빠르게 동작하기 위해서는 어떻게 해야할까?
등의 문제를 해결하기 위해서는 브라우저 작동 원리에 대해 알아야했다.
📌 브라우저의 주요기능
브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다.
이런 자원의 주소는 URI에 의해 정해진다.
브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.(하지만 브러우저마다 다르게 작동하는 부분도 있다.)
🔧 브라우저의 사용자 인터페이스 (다음과 같은 요소들이 일반적으로 포함되어 있다.)
- URI를 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수 년간 서로의 장점을 모방하면서 현재에 이르게 되었다. HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다. 물론 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있다.
📗 브라우저의 기본 구조
브라우저의 주요 구성 요소
사용자 인터페이스
주소 표시줄, 이전/ 다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다.
브라우저 엔진
사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어(브라우저 소프트웨어를 동작시켜주는 핵심 엔진)
렌더링 엔진
요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함
통신
HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨
UI 백엔드
render tree를 browser 에 그리는 역할을 담당한다
자바스크립트 해석기
자바스크립트 코드를 해석하고 실행.
자료 저장소
자료를 저장하는 계층으로 쿠키나 로컬 스토리지등의 자료가 저장되는 저장소이다. 이는 하드디스크에 저장되며 HTML명세등도 이곳에 저장된다.
📌 렌더링 엔진
-
브라우저 별로 가지고 있으며, 여러 종류가 존재한다. 따라서 동작하는 원리도 세세한 부분은 다르다!
(이부분 때문에 크롬에서는 되고 IE에서는 안되는 기능들이 있지 않을까..?)
-
렌더링 엔진의 역할은 요청받은 내용을 브라우저 화면에 표시하는 일이다.
렌더링 엔진의 종류
브라우저 렌더링 프로세스! 🥷🏽
-
사용자가 사용자 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.
-
브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장했다면 그 자료를 렌더링 엔진에 전달한다.
(자주 받아오는 데이터 같은경우에는 효율적으로 하기위해 자료저장소에 저장해서 다시 요청이들어오면 자료 저장소 먼저 찾아보는데 이것을 캐싱 기법이라 한다. ) -
렌더링 엔진은 브라우저 엔진에서 가져온 자료(HTML, CSS, image 등)를 분석한다. 동시에 URI 데이터를 통신, 자바스크립트 해석기, UI 백엔드로 전파한다.
(자료 저장소에 없는 데이터를 요청할 경우에는, 즉 처음 받아오는 데이터가 있을 경우 브라우저엔진이 렌더링 엔진의 통신레이어에게 URI를 전달한다.) -
또한 렌더링 엔진은 통신 레이어에 URI에 대한 추가 데이터(있다면)를 요청하고 응답할 때까지 기다린다.
-
응답받은 데이터에서 HTML, CSS는 렌더링 엔진이 파싱한다.
-
응답받은 데이터에서 JavaScript는 JavaScript 해석기가 파싱한다.
-
JavaScript 해석기는 파싱한 결과를 렌더링 엔진에 전달하여 3번과 5번에서 파싱한 HTML의 결과인 DOM tree을 조작한다.
-
조작이 완료된 DOM node(DOM tree 구성요소)는 render object(render tree 구성요소)로 변한다.
-
UI 벡엔드는 render object를 브라우저 렌더링 화면에 띄워준다.
렌더링 엔진 동작 과정 🧠
-
DOM tree 구축을 위한 HTML parsing, CSS, Javascript parsing : HTML 문서를 파싱한 후, content tree 내부에서 tag(a, div)를 DOM node 로 변환한다. 그 다음 CSS 파일과 함꼐 모든 스타일 요소를 파싱한다. 스타일 요소와 HTML 표시 규칙, Javascript 의 파싱 결과물은 render tree 를 생성한다.
-
render tree 구축 : HTML 과 CSS 를 파싱해서 만들어진 render tree 는 색상 또는 면적 등 시각적 속성을 갖는 사각형을 포함한다. 정해진 순서대로 렌더링한다.
-
render tree 배치 : render tree 가 생성이 끝나면, 배치가 시작된다. 각 node 가 정확한 위치에 표시되기 위해 이동한다.
-
render tree 그리기 : 각 node 배치를 완료하면 UI 벡엔드에서 각 node를 가로지르며 paint 작업을 한다.
1번과 2,3,4번은 병렬적으로 진행된다.
즉, 통신 레이어에서 data를 계속 받아오면서(통신 레이어)
받아온 HTML, CSS, Javascript 를 parsing 하면서(1번)
render tree에 node를 그린다(2,3,4번)
DOM tree 가 완벽히 완성될 때까지 화면에 아무것도 안나오는 것이 아니라 DOM tree가 완성되는 중간중간 바로바로 render tree가 구축이 되어지고, 구축 되는동안 배치가 되고, render tree가 그려지게 된다.
👀 사용자는 DOM tree가 완벽하게 구출될 때까지 기다리지 않고, render tree가 조금씩 그려짐으로 인해서 브라우저에도 조금씩 그려지는 것을 확인 할 수 있다.
webkit의 동작 과정 🔌
👇브라우저 렌더링 엔진중 하나인 webkit의 동작 과정이다.👇
1. HTML을 parsing 하여 DOM tree를 생성한다.
HTML을 Parsing 하여 DOM tree를 생성해야만 자바스크립트가 조작할 수 있다.
2. CSS(style sheets)를 parsing 하여 스타일 규칙을 얻는다
3. DOM tree를 생성하는 동시에, 이미 생성된 DOM tree 와 스타일 규칙(CSSOM)을 Attachment 한다.
4. 구축한 render tree 를 배치(layout)한다.
5. 배치가 끝난 render tree 를 그린다.
Gecko 를 살펴보자! 🔬
👆웹킷과 게코가 용어를 약간 다르게 사용하고 있지만 동작 과정은 기본적으로 동일하다는 것을 알 수 있다.👆
게코는 시각적으로 처리되는 렌더 트리를 "형상 트리(frame tree)"라고 부르고 각 요소를 형상(frame)이라고 하는데 웹킷은 "렌더 객체(render object)"로 구성되어 있는 "렌더 트리(render tree)"라는 용어를 사용한다. 웹킷은 요소를 배치하는데 "배치(layout)" 라는 용어를 사용하지만 게코는 "리플로(reflow)" 라고 부른다. "어태치먼트(attachment)"는 웹킷이 렌더 트리를 생성하기 위해 DOM 노드와 시각 정보를 연결하는 과정이다. 게코는 HTML과 DOM 트리 사이에 "콘텐츠 싱크(content sink)"라고 부르는 과정을 두는데 이는 DOM 요소를 생성하는 공정으로 웹킷과 비교하여 의미있는 차이점이라고 보지는 않는다.
용어 간단정리 📝
파싱
DOM 트리를 구축하기 위해서는 먼저 파싱 과정을 거쳐야 한다. 이는 브라우저가 코드를 이해할 수 있는 구조로 변환하는 과정을 의미하며 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 이를 파싱 트리 또는 문법 트리라고 부른다.
변환
파싱 트리는 최종 결과물이 아니다. 파싱이 완료된 후 이를 다른 양식으로 변환하는데 컴파일을 생각하면 된다. 소스 코드를 기계어로 만드는 컴파일러는 파싱 트리 생성 후 이를 브라우저 소프트웨어가 이해할 수 있는 기계 코드로 변환한다.
자료출처 📗
