✓ 렌더링 : HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 출력하는 과정

브라우저 렌더링 과정

1. 서버로부터 HTML을 다운로드받고 코드를 위에서부터 아래로 *파싱한다.
2. 파싱이 되는 과정에서 CSS 파일을 만나면 CSS 파일을 파싱한다.
3. 파싱이 되는 과정에서 JS 파일을 만나면 진행되던 파싱은 stop되고 JS 파일의 해석이 끝나면 나머지 파싱이 진행된다.
   • ❗️ JS 파일의 크기가 클 수록 렌더링 속도는 느려진다.❗️
4. 파싱이 끝나면 각각의 Model을 생성한다.
   • HTML은 DOM(Document Object Model)
   • CSS는 CSSOM(CSS Object Model)
5. 각각의 Model(DOM, CSSOM)이 결합되면 Render Tree가 생성된다.
6. Render Tree를 바탕으로 Layout(Reflow)과정을 수행한다.
   • 우리가 볼 수 없는 화면에 무언가를 배치하는 과정
7. Layout(Reflow)과정을 끝마치면 Paint(RePaint)과정을 수행한다.
   • 우리가 볼 수 있는 화면에 그려지는 과정
8. 최종적으로 Render가 된다.

✓ parsing(파싱) : 문장이 이루고 있는 구성 성분을 분해하고 분해된 성분의 위계 관계를 분석하여 구조를 결정하는 것

우리가 미쳐 신경쓰지 못했던 부분

Reflow 최적화

우리가 DOM을 변경하게 되면 렌더링 과정 중 5~8번이 다시 수행된다.
그 과정에서 Reflow 과정(7번)은 생략될 수 있으며, Repaint(8번)의 과정은 무조건 수행된다.

Reflow가 일어나는 대표적인 경우는 경우

• 페이지 초기 렌더링 시 (최초 Layout 과정)
• 브라우저 리사이징 시 (Viewport 크기 변경)
• 노드 추가 또는 제거
• 요소의 위치, 크기 변경
• 폰트 변경과 이미지 크기 변경

Reflow 과정을 어떻게 하면 생략할 수 있을까 ?

Layout을 변경하지 않는 속성들(= css 속성)을 사용하면 생략 가능하다.
예를들면 width, height와 같이 박스 크기를 변경 한다거나, margin & paddig을 변경, 폰트 변경 및 이미지 크기 변경 시 배치(Layout)가 변경 되므로 Layout 과정을 생략할 수 없다.

✅ Layout 과정 실행후 Repaint 과정 실행

• 박스 크기의 width, height 변경 -> 배치가 변경 된다.

✅ Layout 과정 생략후 Repaint 과정 실행

• 박스의 background-color 변경 -> 배치가 변경되지 않는다.

틀린 부분이 있거나 보충해야 할 내용이 있다면 댓글이나 DM(sungstonemin)으로 알려주시면 감사하겠습니다😄