브라우저의 랜더딩구조

devAnderson·2021년 12월 29일
0

TIL

목록 보기
6/106

1.도메인네임 vs 호스트네임

도메인 네임 호스트 네임
internet protocol 상에서 기기에 부여된 고유한 public 주소에 대한 DNS name 어떠한 기능을 "hosting"하는 특정 서버의 ip를 칭하는 네임
예를들어, 한 회사의 전체를 총괄하는 서버의 ip를 치환해 놓은 부분이 도메인 네임이다(hello.ok.com 에서 ok.com) 예를들어, 한 회사의 특정 기능을 담당하는 서버의 ip에 효율적으로 접근할 수 있도록 붙이는 것이 호스트 네임이다(hello.ok.com 에서 hello)

2. 브라우저의 렌더링 구조

브라우저(browser)

url을 기반으로 통신하여 html 문서를 출력하거나 그래픽을 표현하는 "응용 소프트웨어" 이다.

브라우저의 기본구조

  • 사용자 인터페이스 => 주소 표시줄, 북마크 등과 같은 렌더링 창을 제외한 부분(상단)
  • 브라우저 엔진 => 해당 사용자 인터페이스의 요청을 처리하는 엔진
  • 렌더링 엔진 => 콘텐츠를 표시하는 부분의 처리부
  • 자바스크립트 엔진 => 받아온 javascript를 처리하는 부
  • 통신 처리부 => http 요청과 같은 주소창에서 입력된 요청을 처리하는 부분이다
  • UI 백엔드 => OS 사용자 인터페이스 체계이다
  • 자료 저장소 => 쿠키저장소, 로컬스토리지와 같은 웹 데이터베이스이다.

렌더링 과정

  1. http 문서가 파싱되면서 DOM을 형성한다

  2. css를 읽는 태그를 만나면 CSSOM을 형성한 후, DOM과 결합된다

  3. 해당 렌더 트리를 이용하여 노드 객체들의 스타일값을 분석한 후, 그것을 뷰포트에 픽셀단위로 반영하는 페인팅 단계를 진행한다.

  4. 마지막으로 script태그를 만나면, html 파서는 파싱을 중단하고 자바스크립트 엔진에 제어권을 넘긴다. 그 후 자바스크립트 엔진이 js 파일을 로드하고 파싱하여 AST를 형성한 뒤 기계가 이해할 수 있는 낮은 수준의 언어로 컴파일하여 실행한다.

    만약 스크립트에 "async" attribute가 있다면 , 그 내용은 html의 파싱과는 관계 없이 다른 스레드에서 처리가 이루어진다
    만약 스크립트에 "defer" attribute가 있다면, html의 해석과 처리가 다 끝나기 전까지는 script 태그가 실행되지 않는다


파싱과 DOM 트리의 구축

브라우저의 랜더링 엔진은 서버로부터 html 문서를 받아오는 순간, 랜더링 엔진을 통해 해당 내용을 파싱하기 시작한다.

파싱이란
문서 쪼가리에 불과한 데이터를 컴퓨터가 이해할 수 있는 자료구조로 치환하는 것을 의미한다. 보통 html 문서를 분해하면 DOM 노드 트리가 생성되고, 자바스크립트를 파싱하면 AST가, 그리고 css를 파싱하면 CSSOM이 생성되는것과 같다.(파싱)

이렇게 파싱은 분해 => 자료구조로 결합 이라는 특징을 가지는데, 여기서 분해의 과정은 크게 두가지로 나뉜다

  1. 토큰분해(어휘분석) => 토큰이란 파싱을 함에 있어 표현되어 있는 코드가 의미를 가지게 되는 가장 최소의 단이를 뜻한다. 보통 공백과 줄바꿈과같은 의미없는 단위는 제거되는 과정도 이에 들어간다
  1. 구문규칙 => 토큰분해로 분해된 수많은 의미단위들을 자료구조로 결합하기 위한 규칙들을 의미한다. 이 규칙에 따라 파서가 행동을 하게된다.

즉, 파서가 문서를 받아서 어휘분석, 즉 토큰으로 분해하면 => 이렇게 만들어진 토큰을 구문규칙에 전달하여 룰에 맞는지 확인하고 맞다면 자료구조 트리에 이를 추가하는 방식으로 진행된다.


파싱 컴파일
특정 구문을 토큰단위로 분해하는 과정을 뜻한다. 위에서 설명하는 것과 같다 *기계가 이해할 수 있는 언어로 변환하는 과정이다(0,1)
즉, 파싱에서 트리가 정해졌다면, 그것을 컴퓨터가 이해할 수 있는 0,1의 구조로 다시 바꾸는 것이 바로 컴파일이다
profile
자라나라 프론트엔드 개발새싹!

0개의 댓글