파서는 컴파일의 일부로서 원시 프로그램의 명령문이나 온라인 명령문, HTML 문서 등에서 MArkup Tag 등을 입력으로 받아들여서 구문을 해석할 수 있는 단위와 여러 부분으로 분할해주는 역할을 한다. 이러한 파서(parser) 역할을 하는 컴퓨터가 구문 트리(parse tree)로 재구성하는 구문 분석 과정을 뜻한다. 파싱 과정에서는 부호에 불과한 일련의 문자열이 기계어로 번역되고 의미있는 단위가 된다.
파싱은 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다.
렌더 트리 구축 (Attachment)
전 단계에서 DOM 트리와 CSSOM 트리가 생성되면, 이 둘을 연결하여 표시해야 할 순서로 내용을 그려낼 수 있도록 하기 위해 렌더 트리를 생성해준다. 이 과정을Attachment라고 한다.
순수한 요소들의 구조와 텍스트만 존재하는 DOM 트리와는 달리 렌더 트리는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.display: none;과 같은 속성이 설정된 노드는 화면에서 어떠한 공간도 차지하고 있지 않기 때문에 렌더 트리를 만드는 과정에서 제외된다
렌더 트리 배치 (Layout or Reflow)
.
렌더 트리가 생성되면 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 이때%,vh,vw와 같이 상대적인 위치, 크기 속성은 모두 실제 화면에 그려지는 px단위로 변환되며 이 과정을Layout또는Reflow라고 한다.
렌더 트리 그리기 (Paint)
Layout과정이 완료되면 요소들의 위치와 크기, 스타일 계산이 완료된 렌더 트리를 사용해 브라우저는 요소들을 실제 화면에 그리게 된다. 이 과정을Paint라고 한다.
이 때, 처리해야 하는 스타일이 복잡할수록 Paint단계에 소요되는 시간이 길어지게 된다. 간단한 예시로 단순한 단색background-color,color등의 경우 Painting 속도가 빠르지만 그라데이션이나 그림자 효과 등 복잡한 스타일은 Painting 소요시간이 비교적 더 오래 소요된다.
렌더링 과정 요약본
1. HTML , CSS 를 다운로드.2. 다운받은 HTML , CSS => Object Model로 만듬.
HTML => DOM , CSS => CSSOM
2-1. HTML => DOM (Document Object Model)
2-2. CSS => CSSOM (CSS Object Model)
2-3. DOM 과 CSSOM 이용 => Render Tree를 생성
주소창에 구글 입력 .
구글 서버로 찾아간다.
*DNS가 연결해줄 곳을 찾음
서버에서 HTML 파일을 클라이언트로 보냄.
HTML 파일 파싱 및 DOM Tree 생성
link 태그를 만나 css 파싱 및 CSSOM 트리 생성
DOM , CSSOM 합쳐 Render Tree 생성 (8. JavaScript를 만나면? HTML파서는 JS 코드를 실행하기 위해 파싱 중단
JS 엔진실행 및 JS코드 파싱)
*DNS - 실제 서버가 어디있는지 알고 있는 서버)
렌더링 최적화
렌더링 과정을 모두 마친 후 최종적으로 브라우저에 페이지가 그려진다고 해서 렌더링 과정이 모두 끝난 것이 아니다. 특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치를 수정하면 그에 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout(Reflow)과정을 다시 수행하게 된다.
이렇게 되면 렌더 트리와 각 요소들의 크기와 위치를 다시 계산하게 되는데 이 과정을Reflow, 그리고 Reflow된 렌더 트리를 다시 화면에 그려주는 과정을Repaint라고 한다.
Reflow
위에서 말한 것처럼 렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을Reflow라고 한다.
Reflow가 일어나는 대표적인 경우는 다음과 같다.
페이지 초기 렌더링 시 (최초 Layout 과정)
브라우저 리사이징 시 (Viewport 크기 변경)
노드 추가 또는 제거
요소의 위치, 크기 변경
폰트 변경과 이미지 크기 변경
Repaint
Reflow만 수행되면 실제 화면에는 반영되지 않기 때문에 다시 Painting이 일어나야 한다. 이 과정을Repaint라고 한다.
무조건 Reflow가 발생해야 Repaint가 수행되는 것은 아니다.background-color,opacity와 같이 레이아웃에는 영향을 주지 않는 스타일 속성이 변경되었을 때는 Reflow를 수행할 필요가 없기 때문에 Repaint만 수행하게 된다.
Reflow 최소화하기
브라우저가 더 렌더링을 빠르고 효율적으로 할 수 있게 개발하기 위해서는 Reflow과정을 최소화 시키는 것이 좋다. Reflow가 발생하면 필연적으로 Repaint가 일어나기 때문에 렌더링 최적화에 좋지 않은 영향을 준다. 그러므로 Reflow가 발생하는 속성보다 Repaint만 발생하는 속성을 사용하는 것이 좋다.
