브라우저의 렌더링 방식

✅ 원리를 알아야 하는 이유

내가 의도한대로 코드를 실행시키려면 브라우저가 어떻게 렌더링 되는지 파악해야 더 효율적인 코드를 작성할 수 있다.

✅ 파싱? 렌더링?

[파싱]

프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트 문자의 문자열을 분해하고 구조를 생성하는 과정

[렌더링]

HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것.

✅ 요청과 응답

브라우저에서 www.XXXXXX.com를 입력 후 엔터를 치면 오른쪽 사진과 같이 순서대로 진행된다. 브라우저에서 서버로 부터 HTML 파일 요청하고 해당 파일 응답받고, CSS 파일도 요청→ 응답, JS도 동일하게 진행된다. (DNS를 통해 IP주소를 파악하는 등 더 많은 내용이 있지만 이번 글에서는 생략하고 심화 버전에서 추가로 더 작성할 계획이다)

✅ 렌더링 순서

1. HTML 파싱 DOM 생성

1. 서버는 브라우저가 요청한 HTML 파일을 읽고 메모리에 저장한 다음, 바이트로 변환 후 바이트로 응답한다.
2. 바이트 형태로 응답 받은 브라우저는 HTML 파일에 <meta charset=”UTF-8”> 지정해 둔 인코딩 방식을 확인하고 문자열로 변환한다.
3. 문자열로 변환된 HTML 문서를 읽고 토큰으로 분해한다. (최소 단위)
4. 토큰들을 객체로 변환하여 노드를 생성한다. 노드는 이후에 DOM을 이루는 하나의 단위이며, 노드들이 모여서 DOM 트리가 구성된다.

브라우저가 DOM 트리를 생성할 때 link와 img 태그를 만나게 되면, 해당 태그 안에 명시되어 있는 리소스를 다운로드 받는다.

그리고 DOM 트리 렌더링 과정에서 script 태그를 만나게 된다면 브라우저는 DOM 생성을 중단하고 script 태그 안에 있는 자바스크립트 코드를 해석하게 된다.

2. CSS 파싱 CSSOM 생성

1. 한 줄씩 순차적으로 파싱하여 DOM을 생성한다. 이때, 중간에 CSS를 로드하는 link, style 태그를 만나면 DOM 생성을 일시 중단한다.
2. 그 후 DOM을 만드는 것 처럼 CSS 파일을 서버에 요청, 응답받는 과정을 HTML과 동일한 과정을 거쳐 CSSOM을 생성한다. 이후 CSS 파싱이 완료되면 마저 HTML 파싱이 중단된 시점으로 돌아가 다시 HTML을 파싱한다.

3. 랜더(Render Tree) 트리 생성

1. 생성된 DOM 트리와 CSSOM 트리가 합쳐서 랜더 트리를 생성하게 된다.

4. 레이아웃 단계

1. 앞서 랜더 트리의 각 요소의 위치와 크기를 계산하여 정확한 배치를 수행한다.

이 때 중요한 것은 display: none 과 같은 속성이 적용된 요소는 랜더 트리에 포함되지 않는다.

5. 페인트 단계

1. 브라우저가 렌더링된 요소들을 화면에 그리는 단계. CSS 스타일링, 배경, 그림자 등을 고려해서 여러 계층으로 구성된 렌더링 요소들을 하나의 이미지로 합치는 과정이다.

이 과정은 사용자의 환경, 컴퓨터 사양, 브라우저 종류에 따라 속도가 다르므로 개발자는 최적화하여 사용자 경험을 개선해야 한다.

✅ 리플로우 현상, 리페인트 현상

[리플로우]

CSS 수정으로 인해 화면에 보이는 Layout이 변경된다면 브라우저는 렌더 트리를 다시 생성하고 레이아웃→페인트→ Composite→화면을 사용자들에게 다시 렌더링하는 현상.

[리페인트]

레이아웃 단계에서 변경이 없다면 레이아웃 단계를 건너뛰고 페인트,Composite, 화면 렌더링을 하게된다.

✅ 웹 사이트 성능 좋게 하려면?

1. 애니메이션 구현 시 transform, opacity 사용

transform, opacity 속성을 사용해도 DOM 트리를 변경되지 않게 설계되어 있다. 그렇기 때문에 리플로우, 리페인트를 생략 되고 브라우저가 화면을 쾌적하게 렌더링을 할 수 있게 된다.

2. CSS 및 JavaScript 최적화

css코드와 js코드가 지나치게 복잡하거나, 파일 크기가 크면 렌더링 성능을 저하시키는 원인이 된다. 그래서 코드를 압축하고, 중복 또는 불필요한 코드를 제거하고, JS코드를 지연 로딩하거나 비동기 로딩을 이용하여 페이지 로딩 시간을 최적화 필요가 있다.

3. 외부에서 가져오는 횟수 줄이기

4. 이미지 최적화

Lazy Loading 기술을 이용하는 등 페이지 스크롤링에 따라 이미지를 로딩하는 방식을 채택한다.

참고 자료

https://www.youtube.com/watch?v=z1Jj7Xg-TkU

https://oliviakim.tistory.com/80#자바스크립트 파싱과 실행-1

https://opendeveloper.tistory.com/entry/FrontEnd-지식브라우저-렌더링-원리와-순서성능-최적화-고려사항

https://www.youtube.com/watch?v=Mqh13dNI8jc

https://www.reason-to-code.com/blog/why-do-they-ask-about-browser-rendering/