⁉️ 파싱은 렌더링 엔진에서 매우 중요한 과정이기 때문에 더 자세히 다루도록 한다!!

❔파싱 일반

문서 파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것을 의미한다. 파싱 결과는 보통 문서 구조를 나타내는 노드 트리인데 파싱 트리(parse tree) 또는 문법 트리(syntax tree)라고 부른다!
```
예) 2+3-1과 같은 표현식은 다음과 같은 트리가 된다!
```

문법

파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. 이것을 문맥 자유 문법이라고 한다. 인간의 언어는 이런 모습과는 달라 기계적으로 파싱이 불가능하다.

파서-어휘 분석기 조합

파싱은 어휘 분석과 구문 분석이라는 두 가지로 구분할 수 있다.
어휘 분석은 자료를 토큰으로 분해하는 과정이다. 토큰은 유효하게 구성된 단위의 집합체로 용어집이라고도 할 수 있는데 인간의 언어로 말하자면 사전에 등장하는 모든 단어에 해당된다.
구문분석은 언어의 구문 규칙을 적용하는 과정이다.

파서의 두가지 행동

자료를 유효한 토큰으로 분해하는 어휘 분석기
- 공백과 줄 바꿈 같은 의미 없는 문자를 제거한다.
언어 구문 규칙에 따라 문서 구조를 분석함으로써 파싱 트리를 생성하는 파서가 있다.

파싱 과정은 반복되고 파서는 보통 어휘 분석기로부터 새 토큰을 받아서 구문 규칙과 일치하는지 확인한다. 규칙에 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고 파서는 또 다른 토큰을 요청한다.

규칙에 맞지 않으면 파서는 토큰을 내부적으로 저장하고 토큰과 일치하는 규칙이 발견될 때까지 요청한다. 맞는 규칙이 없는 경우 예외로 처리하는데 이것은 문서가 유요하지않고 구문 오류를 포함하고 있다는 것이다!

변환

파서 트리는 최정 결과물이 아니다.예를 들어 소스코드를 기계 코드로 만드는 컴파일러는 파싱 트리 생성 후 이를 기계 코드 문서로 변환한다.

파서의 종류

하향식 파서 : 구문의 상위 구조로부터 일치하는 부분을 찾기 시작
상향식 파서 : 구문의 하위 구조로부터 일치하는 부분을 찾기 시작

자세한 내용은 출처 참고!

❓HTML 파서

HTML 마크업을 파싱트리로 변환한다.
HTML의 어휘와 문법은 W3C에 의해 명세로 정의되어 있다.(HTML5)
유연한 문법 : HTML은 암묵적으로 태그에 대한 생략이 가능하고, 가끔 시작 또는 종료 태그 등을 생략한다.(XML과의 차이)
따라서 HTML은 파싱하기 어렵고 전통적인 구문 분석이 불가능하기 때문에 문맥 자유 문법이 아니라는 것이다. XML 파서로도 파싱하기 쉽지 않다.

⭐DOM

Document Object Model의 줄임말로 문서 객체 모델이다.
파싱 트리는 DOM 요소와 속성 노드의 트리로서 출력 트리가 된다.
HTML문서의 객체 표현이고 외부를 향하는 JS와 같은 HTML요소의 연걸 지점이다.
트리의 최상위 객체는 문서이다.
DOM은 마크업과 1:1 관계를 맺는다!

<html>
  <body>
   <p>Hello World</p>
   <div><img src="example.png" /></div>
  </body>
</html>

이것은 아래와 같은 DOM트리로 변환할 수 있다.

트리가 DOM노드를 포함한다고 말하는 것은 DOM 접점의 하나를 실행하는 요소를 구성한다는 의미다. 브라우저는 내부의 다른 속성들을 이용하여 이를 구체적으로 실행한다!

파싱 알고리즘

HTML의 경우 일반적인 상향식/하향식 파서로는 파싱이 안된다.
1. 언어의 너그러운 속성
2. HTML 오류에 대한 브라우저의 관용
3. 변경에 의한 재파싱 (일반적인 소스는 파싱하는 동안 변하지 않지만 HTML에서 document.write을 포함하고 있는 스크립트 태그는 토큰을 추가할 수 있기 때문에 실제로는 입력 과정에서 파싱이 수정된다.)

위의 세가지 이유 때문에 HTML파싱을 위해 별도의 파서를 만든다.

브라우저는 HTML을 받아서 어휘와 구문을 분석해서 파싱해 파싱 트리를 만든다!
파싱 트리를 기반으로 DOM 요소와 속성 노드를 가지는 DOM 트리를 생성한다.
DOM의 생성 과정을 CSS에 반복해 CSSOM(CSS Object Model)을 생성한다.
DOM 트리가 구축되는 동안 브라우저는 DOM 트리를 기반으로 렌더 트리를 생성한다.
렌더 트리는 위치와 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 결정해주고, 렌더 트리의 각 노드를 화면에 그리면 화면에 콘텐츠가 표현된다!

1.HTML 문서들을 파싱하여 DOM트리를 만든다.
2. 렌더링 엔진은 css/style 데이터를 파싱하고 그 스타일 데이터들로 렌더트리를 만든다.

3. 렌더 트리 레이아웃 만들기
각 노드들에게 스크린의 어느 공간에 위치해야 할지 각각의 값을 부여하는 것
4. 렌더 트리 페인팅
렌더 트리가 만들어져 레이아웃이 구성된다면, UI 백엔드가 동작하여 각 노드들을 정해진 스타일 및 위치값대로 화면에 배치한다.

브라우저가 문서들을 파싱해 DOM구조를 만들고 화면에 나오는 브라우저의 동작 원리에 대해 간단하게 알아봤다.
기본 중 기본이기에 더욱 더 자세히 알고 꼭 숙지해야하는 부분이라 계속해서 봐야할 것 같다.😂(어렵다)

출처 (자세한 내용은 이곳에서!)
https://flash-ctf.tistory.com/36
https://d2.naver.com/helloworld/59361
https://woong-jae.com/web/210821-how-does-browser-work

Author And Source

이 문제에 관하여(파싱과 DOM트리 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ybj1227/파싱과-DOM트리-구축

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

파싱과 DOM트리 구축