[Browser] 파서의 종류와 HTML파서, DOM

파서의 종류

• 상향식 : 구문의 낮은수준에서 높은 수준으로 일치하는 부분을 찾음.
  • 항, 항연산자, 표현식, 표현식 연산자 순으로 일치하는 표현식을 하나씩 스택에 쌓음
  • =이동-감소 파서 : 입력값의 오른쪽으로 포인터가 이동하기때문에 구문 규칙에 남는 것이 점차 감소.
• ex.) 2+3-1 -> +3-1 -> 3-1 -> -1, 1,
• 하향식 : 상위 구조로부터 일치하는 부분을 찾음. 표현식부터 쌓음

• 파서 자동 생성 : 수동파서 최적화는 어렵기때문에 웹킷은 어휘생성을 위한 플렉스와 파서 생성을 위한 바이슨을 사용한다. 플렉스는 토큰의 정규표현식 정의를 포함하는 파일을 입력 받고 바이슨은 BNF 형식의 언어 구문 규칙을 입력 받는다.

---

HTML 파서

• 마크업을 파싱 트리로 변환
• 문법은 W3C에 명세로 정의
• 전통적 파서는 HTML적용 불가. (JS와 CSS를 파싱할때 사용하는 것)
• HTML 정의를 위한 공식적인 형식인 DTD(문서 형식 정의)가 있지만 이것은 BNF가 아님.(HTML은 자유 문법 형식이 아님.)
• HTML과 XML이 유사하지만 차이점을 꼽으면 HTML이 더 너그럽다는 것.
• 즉 실수를 용서하고 생략을 받아들임. 이런 자유로움 때문에 공식적인 문법으로 작성하기 어려움. 즉 파싱하기 어려워짐.

• 키워드 : HTML DTD

---

DOM

• 파싱트리는 DOM요소와 속성 노드의 트리로서 ''출력 트리''가 된다.
• DOM은 문서 객체 모델이며 HTML문서의 객체 표현. 외부를 향하는 연결지점. 트리의 최상위 객체는 문서.(document)
• DOM은 마크업과 1:1 관계를 맺는다.(각 html, body, div, p태그 등등..)

 

• 마크업의 DOM 트리 예시.

---

다음공부

• 파싱알고리즘
• CSS 파싱

---

ref

• https://d2.naver.com/helloworld/59361