들어가며 ⏫

이 글은 중급자를 위하여 쓰여졌습니다. 초급자가 이해하기엔 다소 난해한 개념들이 등장하고, 고급자에겐 당연한 내용들 및 명확하지 않은 내용이 있을 수 있습니다. 고급자 분들은 가볍게 읽고, 참조문서의 보다 자세한 내용을 보시길 권해드립니다.

객체 모델 생성 ⏫

브라우저가 HTML 파일을 전송받으면 HTML 마크업은 DOM(Document Object Model)으로, CSS 마크업은 CSSOM(CSS Object Model)으로 변환해 트리를 생성합니다.

DOM과 CSSOM은 독립적인 데이터 구조입니다.

DOM ⏫

• Bytes → Characters → Tokens → Nodes → Object Model
  • Conversion - Tokenizing - Lexing - DOM construction

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/dom-tree.png

1. Conversion: 브라우저가 HTML의 원시 바이트를 읽어, 지정된 인코딩에 따라 문자로 변환합니다.
2. Tokenizing: 브라우저가 문자열을 고유 토큰으로 변환합니다.
3. Lexing: 토큰을 해당 속성 및 규칙을 정의하는 객체로 변환합니다.
4. DOM construction: 트리 데이터 구조에 연결합니다.

위 과정의 최종 결과물이 DOM 이며, HTML 마크업이 변경될 때 마다 위의 모든 단계를 수행합니다.

CSSOM ⏫