브라우저의 렌더링_HTML 파싱과정

조재일·2023년 4월 11일

CS지식

목록 보기

4/6

브라우저 렌더링 과정

전체적인 브라우저 렌더링 과정을 먼저 보고 가보자
HTML과 CSS를 파싱하고 각각의 Tree를 만들고 합쳐서 Render Tree를 작성한다. 그 다음 Layout과 Paint과정을 거쳐서 Client에게 완전한 화면을 보여준다.

HTML 파싱 과정

더 디테일하게 들어가본다면 먼저 HTML 파싱과정에 대해서 알아야한다.

Byte Stream Decoder

해당 단계는 Byte코드로 되어 있는 HTML을 String으로 변화시켜주는 과정이다.

Input Stream Preprocessor

해당 단계는 사용자가 보기 쉽게 작성되어있는 HTML코드에 공백과 주석을 제거하는 과정이다.

Tokenization

공백과 주석이 제거된 HTML코드를 토큰으로 분리 해주는 과정이다.

그 다음 HTML파서가 구문분석을 진행하고 DOM Tree를 만들어 주는 것을 끝으로 HTML파싱 과정이 끝난다.

HTML 파서

추가적으로 HTML 파서에 대해서 알아보자
여기서 HTML파서를 한번 보고 가는 이유는 HTML 파서는 다른 파서들과 다르게 전통적인 구문분석 방식으로 파싱하기 어렵기 때문이다
그 이유는 일반적인 프로그래밍 언어와 다르게 유연한 언어이기 때문이다.
위의 예시처럼 여러개의 태그가 중첩되어 있는 경우도 많고, 종료태그가 없는 태그도 존재하기 때문이다.