브라우저 작동 원리

브라우저

• 웹 페이지나 기타 온라인 컨텐츠를 엑세스하고 표시할 수 있게 해주는 응용 소프트웨어
• 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현 하는 소프트웨어
• ex) 크롬, 사파리, 엣지, 파이어폭스 등

 

구동 과정

1. 주소입력

2. DNS를 이용하여 서버 IP 접근

3. 클라이언트와 서버 간 접속을 위한 TCP 소켓 연결

4. 클라이언트에서 HTTP 헤더와 데이터가 서버로 전송

5. 해당 요청이 서버에 도달하면 사용자가 원하는 문서를 다시 웹브라우저에 전송

6. 웹 브라우저의 렌더링 엔진에서 해당문서를 파싱

 

렌더링 엔진

요청 받은 자원을 브라우저 화면에 표시하는 작업을 하는 엔진

ex) 크롬, 사파리의 웹킷 / 파이어폭스의 게코

 

렌더링 엔진 동작 과정

브라우저가 HTML,CSS 등의 파일을 변환하여 화면에 픽셀 단위로 나타내기 위해 거치는 과정

//웹 서버로부터 전달받은 HTML문서를 맨 처음 네트워크 레이어에서 불러옴

 

1. HTML 파싱 / DOM 트리 생성

HTML 내용과 속성을 노드로 갖고 각 노드릐 관계를 나타내는 트리

HTML 문서를 구조화하여 스크립트 또는 프로그래밍 언어에서 접근 가능한 형태로 제공

컨버젼 : 서버에서 HTML문서를 로우바이트 형태로 받아와 해당 파일의 인코딩에 따라 문자열 태그로 변환

토큰화 : 변환된 문자열 태그를 토큰으로 변환

렉싱 : 토큰을 다시 각각의 특성과 규칙을 정의한 객체 노드로 변환

 

2. CSSOM 생성

DOM 생성과 마찬가지로 토근화 및 노드로 변환하여 CSS Object Model로 변환

//브라우저가 모든 CSS를 파싱하고 처리할 때까지 페이지 화면에 그려지지 않음

 

3. 렌더 트리(DOM+CSSOM) 생성

DOM의 노드에 일치하는 CSSOM 규칙을 찾아 연결

가시적인 노드만 포함

메타태그, 스크립트, display:none은 렌더링 트리에 포함안됨

visibility:hidden은 공간을 차지하여 렌더링 트리에 포함

화면에 최종적으로 그려지는 내용이 됨

 

4. 렌더 트리 배치(레이아웃)

브라우저가 화면에 그리기 전에 각 노드들의 정확한 위치와 크기로 나타내기 위한 계산하는 과정

-> 상대값(%)은 절대값(px)으로 변환

화면에 그릴 노드와 노드의 스타일을 계산하여 하나의 그룹으로 렌더 트리를 만듬

 

5. 렌더 트리 그리기

트리의 노드를 픽셀로 화면에 나타냄

 

HTML 요소들을 렌더링 엔진으로 한번에 출력하는 것이 아니라 일부는 먼저 과정을 거쳐 스크린에 나타나고 그 와중에 웹의 다른 요소들은 네트워크를 통해 렌더링 엔진으로 읽어들어 오는 순차적인 방식으로 입출력이 진행

 

파싱

브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것

어휘분석 - 문서의 자료를 토큰으로 분해하는 과정

구문분석 - 언어의 구문 규칙을 적용하는 과정

 

DOM

Document Object Model

마크업 형태의 HTML문서를 오브젝트 모델 형태로 바꿔놓은 것

XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스

 

참고

http://www.tcpschool.com/javascript/js_dom_concept

https://yilpe93.github.io/Web/browser/

https://inpa.tistory.com/entry/%EB%B0%B1%EC%97%94%EB%93%9C-%EB%A1%9C%EB%93%9C%EB%A7%B5-%F0%9F%8C%90-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%99%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC

https://oneroomtable.tistory.com/entry/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%97%AD%ED%95%A0