HTML Parsing
서버로부터 내려받은 HTML을 파싱한다.
파싱: 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다
문자화
컴퓨터는 HTML 파일안에 작성한 문자들을 바로 이해할 수 없다.
때문에 브라우저는 컴퓨터가 이해할 수 있도록 친화된 0과 1로 된 기계어로 바꾸는 과정을 거친다.
이후 다시 문자화를 하는 과정을 거친다.
토큰화
토큰화는 파서가 문자화된 코드를 의미 있는 정보 단위 뭉치로 만드는 단계이다.
대부분의 글에서 말이 어렵게 설명되어 있었는데 나는 브라우저가 HTML을 해석하는 과정이라 이해 했다.
컴퓨터든 인간이 쓰는 언어든 규칙과 존재하고 단어에 의미를 부여한다.
브라우저가 문자화된 HTML 코드를 읽어나가면서 사전적으로 정의 된 뜻을 부여하고 정보를 구성하는 초기 단계이다.
돔 트리
개발자 도구에서 확인 가능한 Dom Tree
토큰화가 완료되면 이 토큰을 다시 화면에 필요한 정보형태로 재가공해야 하는데 이때 Document Object Model을 사용한다.
위를 보면 각 태그에 필요한 정보구조와 childnodes,children등을 통해 부모 자식간의 구조를 파악할 수 있다.
이렇게 HTML파서를 통해 만들어진 자바스크립 형식의 DOM 정보들로 브라우저 화면을 구성의 기초를 만드는 것이다.
CSSOM (CSS Object Model)
CSS파싱은 <link> 태그를 만나는 순간 HTML 파싱을 중단하고 진행된다.
이후 HTML 파서와 마찬가지로 CSS 규칙에 맞게 토큰화와 Tree구조를 지닌 정보형태로 재가공된다.
다만 HTML 파서와 다른 점은 먼저 받아온 코드부터 해석 할 수 있는 HTML 파서와 달리 CSS 파서는 CSS 파일을 모두 다운로드 전까지는 파싱이 진행되지 않는다.
Render Tree
화면에 나타낼 요소들을 결정하는 단계이다.
돔 트리가 구성되는 동안 브라우저는 렌더 트리를 구축한다. 즉 병렬적으로 구축한다.
Render Tree는 돔 트리와 CSSOM을 합친다. 이 과정에서 DOM과 CSSOOM을 비교하며 정보들을 매칭시키며 화면에 나타낼 요소들을 결정한다.
이때 화면에 나타낼 요소들에서 display:none과 같이 렌더링을 없앤 태그들은 제외시킨다.
때문에 Dom Tree와 Render Tree가 정확하게 일치하지 않는다.
Dom은 모든 정보를 가지고 있다면 렌더트리는 실제 화면에서 사용할 정보뭉치 단계로 이해하면 될 것 같다.
Layout & Paind
https://www.youtube.com/watch?v=ZTnIxIA5KGw&t=9s 레이아웃 과정을 잘 나타낸 동영상
화면의 레이아웃의 구조를 잡는 단계
Layout 단계는 Renter tree에서 계산되지 않았던 화면에 나타낼 Dom 요소들의 크기 위치, 레이어 순서같은 정보를 계산하여 좌표에 나타낸다. 이후 Paint 단계에서 배치된 레이아웃에 style을 붙인다.
주의할 점
핀터레스트 레이아웃이나 무한스크롤 같이 Layout 계산이 많으면 많아질 수록 렌더링 속도에도 영향을 주니 최적화에 많은 신경을 써줄 필요가 있다.
🖐 잠깐 Real Dom과 가상 DOM은 무슨 차이일까
리얼 돔과 가상 돔의 차이는 실제 렌더링 전 가상으로 Dom을 그리느냐의 여부다.
컴퓨터는 인간처럼 시각적으로 한번에 보고 수정된 사항을 파악할 수 없다. 코드를 한줄 한줄 읽어나가며 변경된 내역을 읽고 반영한다. 때문에 수정된 코드 마다 매번 렌더링을 반복하면 어떨까? 매번 위치를 재 계산해야하기에 많은 비용이 들 것이다.
이런 반복적인 계산과정을 실제 Dom에서 하기에는 매우 무거우니 가상에서 처리한다. 이후 최종적인 결과물만 실제 Dom에 반영하는게 바로 가상 Dom이다.
최종 결과물만 바로 반영하면서 얻는 장점은 부드러운 화면 전환이다. 리얼 돔은 매번 새로 그리는 과정을 거쳐야 했지만 가상 Dom에서는 이전 변경사항 내역과 비교해 변경 내용을 반영한다. 즉 변해야할 부분만 변한다는 것이다. 이로 인해 사용자는 빠른 웹사이트 전환을 이용할 수 있다.
출처
https://yozm.wishket.com/magazine/detail/1338/ 지그재그의 개발블로그
