🤿 (3) 브라우저 렌더링 과정 탐구 - HTML 파서

“(1) 내가 작성한 코드 → 웹 화면에 나오기까지 - 브라우저 렌더링 과정” 작성을 위해 브라우저 렌더링 과정을 검색 하다가 HTML 파서를 간단히 구현한 분의 글을 읽었다!🫢

바로 이 글! 브라우저 작동방식 탐구 - HTML 파서(Parser) 구현하기

탐구하고 더 깊이 파고 들어가는 분들의 모습 진짜 너무나 멋지고 본받고 싶은 모습!

과연 HTML 파서를 통해 DOM 트리를 만드는 과정은 어떻게 진행될까?

그리고 구현해본다면 어떤 코드들이 나올까?

(실제 HTML 파서가 작동하는 방식으로 짜여진 코드가 아닌 학습한 후 구현해보고 싶은대로 구현한 과정을 담았습니다!)
(이번 프로젝트 깃허브 주소)

그러면 시작❗️

목차

1. 브라우저 렌더링 과정 간단한 정리
2. 파싱에 대한 간단한 정리
3. 노드 구현 - 임의로 만든 Node 계층 트리
4. 파서 구현 - 문자 → 토큰, 토큰 → 노드 → 객체 모델의 각 과정

---

1. 브라우저 렌더링 과정 간단한 정리

   브라우저 화면을 만드는 단계인 렌더링 과정을 Critical Rendering Path라고 한다.

   그 중 HTML을 파싱하여 DOM 트리로 만드는 과정은 바이트 → 문자 → 토큰 → 노드 → 객체 모델이다.

   

2. 파싱에 대한 간단한 정리

   2 - 1) 문법

   • 파싱은 문서에 작성된 언어 또는 형식의 규칙에 따르는데 파싱할 수 있는 모든 형식은 정해진 용어와 구문 규칙에 따라야 한다. (→ 문맥 자유 문법)

   2 - 2) 파서-어휘 분석기 조합

   • 파싱은 어휘 분석과 구문 분석으로 구분할 수 있다.
     • 어휘 분석: 자료를 토큰으로 분해하는 과정 (사전에 등장하는 모든 단어를 말한다고 할 수 있다.)
     • → 어휘 분석기(lexical analysis)가 하는 일이며 어휘 분석을 하는 과정에서 무의미한 공백, 줄 바꿈과 같은 문자를 제거한다.
     • 구문 분석: 언어의 구문 규칙을 적용하는 과정
     • → 파서(parser)가 하는 일이며 규칙과 맞지 않을 경우 에러를 낸다.

   2 - 3) 파싱 과정

   • 파싱 과정은 반복된다.
   • 파서는 보통 어휘 분석기로부터 새 토큰을 받아서 구문 규칙과 일치하는지 확인한다.
   • 규칙과 맞으면 토큰에 해당하는 노드가 파싱 트리에 추가되고 파서는 또 다른 토큰을 요청한다.
   • 규칙과 맞지 않으면 파서는 토큰을 내부적으로 저장, 토큰과 일치하는 규칙이 발견될 때까지 요청한다.
   • 맞는 규칙이 없는 경우 예외 처리로 에러를 낸다.

---

3. 노드 구현 - 임의로 만든 Node 계층 트리

   1. 임의로 만든 Node 계층 트리

      (실제 노드 계층과 큰 연관이 없으며 결과를 정해놔야 코드를 작성할 수 있기 때문에 나름대로 만들어 보았다!)

      

      • CommonNode: Node 객체에 해당하는 가장 상위 객체

      • EachNode: CommonNode의 하위 객체이면서 ElementNode 외에 모든 텍스트를 의미하는 노드

      • EachELement: CommonNode의 하위 객체이면서 element에 해당하는 모든 노드

        각각의 객체를 클래스로 정의하였다.

        export class CommonNode {
            depth: number;
            nodeName: string;
            nodeType: number;
            innerHTML: string;
            value: string | null;
            childNodes: Array<IEachNode | IEachElement>;
            nodeValue?: string;
            tagName?: string;
            attributes?: string;
            children?: Array<IEachNode | IEachElement>;
        
            constructor({ depth, nodeName, nodeType, innerHTML, value, childNodes }: ICommonNode) {
                this.depth = depth;
                this.nodeName = nodeName;
                this.nodeType = nodeType;
                this.innerHTML = innerHTML;
                this.value = value;
                this.childNodes = childNodes;
            }
        }
        
        export class EachNode extends CommonNode {
            constructor({ depth, nodeName, nodeType, innerHTML, value, childNodes, nodeValue }: IEachNode) {
                super({ depth, nodeName, nodeType, innerHTML, value, childNodes, nodeValue });
                this.nodeValue = nodeValue;
            }
        }
        
        export class EachElement extends CommonNode {
        
            constructor({ depth, nodeName, nodeType, innerHTML, value, childNodes, tagName, attributes, children }: IEachElement) {
                super({ depth, nodeName, nodeType, innerHTML, value, childNodes, tagName, attributes, children });
                this.tagName = tagName;
                this.attributes = attributes;
                this.children = children;
            }
        }

---

4. 파서 구현 - 문자 → 토큰, 토큰 → 노드 → 객체 모델의 각 과정

   문자 → 토큰, 토큰 → 노드 → 객체 모델의 각 과정을 먼저 그려보고자 한다!

   4 - 1) 문자 → 토큰

   실제 문자 → 토큰 단계에서 태그 배열에 depth를 주는 것 같지는 않았지만, 개발의 편의를 고려하여 넣었고,

   순서를 글로 표현하면 다음과 같을 것이다.

   

   4 - 2) 토큰 → 노드

   

---

출처
브라우저 작동방식 탐구 - HTML 파서(Parser) 구현하기
프론트엔드 개발자라면 알고 있어야 할 브라우저의 동작 과정(2)
렌더링 엔진(1) - 파싱과 DOM트리 구축