(1) 편에 이어 조금 더 브라우저 렌더링의 큰 그림을 그려보자.

Critical Rendering Path

브라우저가 서버에서 페이지에 대한 HTML 응답을 받아 윈도우에 표기하기 까지의 과정을 Critical Rendering Path (CRP) 라고 한다.

🔮 Construction

HTML 페이지를 브라우저가 이해할 수 있도록 브라우저의 언어로 변환하는 파트

📦 requests/response

HTML파일을 서버에게 요청해 받아온다.

참고 : https://velog.io/@gygy/Client-Server

📦 loading

받아온 파일을 로드한다.

📦 scripting

파일을 한 줄 한 줄 읽어 DOM과 CSSOM 으로 변환한다.

🔮 Operation

만들어진 렌더 트리를 이용해 구조를 작성하고 어디에 배치할 건지 계산해 실제로 렌더링 하는 파트

rendering

브라우저 윈도우에 표기하기 위해 render tree를 만든다

📦 layout

각각의 위치에 얼마나 크게 표기될건지 레이아웃을 계산한다.

최종적으로 계산된 css 정보를 포함해 윈도우에 각 요소들을 배치할 위치와 크기를 계산해 레이아웃을 구상한다.

📦 painting

계산한대로 그린다.

레이아웃에 따라 요소들을 잘게 나누어 비트맵이라는 이미지형태로 변환해 준비한다.
예)
따로 위에 떠 있는 요소들을 함께 준비하는 등
z - index와 같은 다양한 속성값에 따라 레이어 단계를 나누어 준비한다.

why?

레이어 별로 요소들을 구성하게 되면, 특정 레이어의 요소만 따로 변경할 수 있어 효율적이기 때문이다. procreate와 같은 앱들이 레이어 별로 디자인 작업을 할 수 있는 기능을 생각하면 된다.

will-change

속성값이 변화될 수 있는 요소를 미리 지정하는 CSS 프로퍼티
paint단계에서 이러한 요소는 효율적으로 변경할 수 있도록 미리 별도의 레이어에 준비해둔다.

📦 composition

준비한 레이어 순서대로 요소들을 쌓듯이 표기한다.

여기까지의 전 단계를 Critical Rendering path라고 부른다 !

효율적인 렌더링을 위해...

construction

요소들을 작게 만드는 것

operation

• composition 단계를 다시 거치는 경우 : translate을 이용하게 되면 paint는 일어나지 않는다. 레이어가 준비되어있는 상태에서 레이어 이동만 하면되기 때문에 composition만 일어난다.
• paint 단계부터 다시 거치는 경우 : 무언가가 다시 그려져야 한다면 paint 단계를 거쳐야 한다.
• layout 단계부터 다시 거치는 경우 : 요소 추가로 인해 주변 다른 요소들의 위치가 변경이 된다면 layout단계부터 다시 거쳐야 하기 때문에 성능이 저하될 수 있다.