브라우저 랜더링 과정에 대해서 학습한 내용입니다.
브라우저 랜더링 과정
- HTML, JS, CSS, Image 등 랜더링에 필요한 에셋을 내려받는다.
- 브라우저 랜더링 엔진이 내려받은 HTML 파일을 한줄씩 파싱합니다.
- HTML 태그를 파싱해 DOM 을 생성을 하고, CSS 코드를 파싱해 CSSOM 을 생성합니다.
- 생성된 DOM과 CSSOM을 조합해 실제 랜더링 될 랜더 트리를 생성합니다. 이때 브라우저에 표현되지 않는 내용은 랜더 트리에 반영되지 않습니다. (예를 들면
display: none,visibility: hidden등이 있습니다. - 완성된 랜더 트리를 바탕으로 레이아웃을 그립니다.
- 레이아웃을 그린 후 페인트 과정을 거쳐 랜더링을 끝냅니다.
리랜더링이 발생한 경우
DOM 에 변화가 생겨 DOM 이나 CSSOM 이 변경된 경우, 즉 리랜더링이 발생한 경우 DOM 과 CSSOM 은 다시 렌더 트리로 결합되고 리플로우(Reflow)와 리페인트(Repaint) 과정이 발생합니다.
리플로우는 레이아웃을 다시 계산하는 과정입니다. 리플로우가 발생한다면 리페인트에 비해 상대적으로 비용이 큰데, 그 이유는 리플로우가 발생한다면 부모와 형제 요소들까지 레이아웃을 다시 계산해야 하기 때문입니다.
리페인트는 변경된 렌더트리를 바탕으로 다시 페인트를 하는 것을 말합니다.
CSS 코드를 작성할 때 브라우저 렌더링 퍼포먼스를 고려하면서 작성할 수 있습니다. 가급적이면 리플로우를 발생시키지 않고 리랜더링이 필요한 경우 리페인트 과정만 거치도록 스타일링 할 수 있습니다.
리플로우가 발생한다면 리플로우와 리페인트 과정 모두 거쳐야하는 반면, 리페인트는 리플로우 과정을 건너뛸 수 있기 때문에 브라우저 랜더링 퍼포먼스에 영향을 줍니다.
script 태그
브라우저 랜더링 엔진과 JS 엔진은 한 줄씩 직렬적으로 파싱을 실행합니다. 랜더링 엔진이 HTML 파싱 중 script 태그를 만나면 HTML 파싱이 블로킹 되고 JS 엔진에 의에 JavaScript 파싱이 시작됩니다. 제어권을 넘겨받은 JS 엔진은 JavaScript 를 파싱하여 AST (Abstact Syntax Tree) 를 생성하고 AST 를 기반으로 인터프리터가 해석할 수 있는 중간 코드를 생성합니다.
HTML 파싱이 블로킹이 되기 때문에 script 태그의 위치는 중요합니다. 만약 script 에서 DOM API 를 통해 DOM 을 조작할 때 HTML 파싱이 블로킹 되어 DOM 생성이 중단됐다면, DOM 이 존재하지 않을 수 있어 에러가 발생할 수 있습니다.
그렇기 때문에 가급적 script 태그는 body 태그의 아래 위치하는게 좋습니다. 또한 script 태그로 인해 HTML 요소들이 랜더링을 지장받는 일이 발생하지 않아 페이지 로딩 속도가 단축됩니다.
