브라우저 렌더링 과정?
parsing 과 rendering
파싱(parsing): 프로그래밍 언어로 작성된 텍스트를 분해하고 구조를 생성하는 일련의 과정
렌더링(rendering): HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것.
DOM?
HTML 문서를 파싱(parsing)한 자료구조 형태의 결과물
(CSSOM 도 같은 개념이라고 보면 된다.)
브라우저 렌더링이 반복되는 경우?
- 자바스크립트에 의한 노드 추가 또는 삭제
- 브라우저 창의 리사이징에 의한 뷰포트 크기 변경
- HTML 요소 레이아웃에 변경을 발생시키는 스타일 변경
위의 경우를 리렌더링 된다고 표현하는데, 리렌더링은 성능에 안 좋은 영향을 끼치므로 자주 일어나지 않도로 하는 것이 좋다.
- 렌더링 엔진 기본 동작 과정
cf) 이 과정에서 자바스크립트는?
렌더링 엔진에서 처리되지 않고, 자바스크립트 엔진이 처리한다. 1번 과정에서 script 태그를 만나면 js 코드 실행을 위해 DOM 생성을 중단하고, 자바스크립트 엔진으로 권한을 넘긴다. 자바스크립트 엔진은 script 태그 내에 js 코드나 src 속성에서 정의된 js 파일을 로드해 파싱 후 실행한다. 그 과정이 끝나면 다시 1번 과정으로 돌아가 중지했던 시점부터 DOM 생성을 재개하는 것이다.
1) HTML parsing
브라우저 렌더링 엔진이 HTML을 parsing 해서 DOM 노드로 이루어진 DOM tree 를 생성
2) CSS parsing
CSS 파일과 inline style 을 parsing 하여 CSSOM을 만듬.
3) Render Tree 생성
1의 DOM 과 2의 CSSOM을 결합해 생성
화면에 시각적으로 나타나는 요소를 결정하는 것. (어떤 스타일이 적용되어야 하는지, 순서는 어떻게 나타낼지 등) 시각적이지 않은 것들은 Render tree에 그려지지 않음.
4) Layout (reflow 라고도 표현함)
Render Tree의 각 노드들이 화면 상에서 어디에 배치되어야 할지 계산해 box-model 을 생성하는 과정
5) Paint
실제로 개별 노드를 화면에 paint하여 UI 백엔드에서 Render tree를 그리는 과정
