DOM과 CSSOM에 이어..
- 이번엔 웹페이지나 웹어플리케이션을 브라우저가 사용자에게 보여주기까지 어떤 과정을 거치는지 공부한다.
- 성능 좋은 웹어플리케이션을 만들기 위한 필수 !!
Critical rendering path
브라우저에서 url을 입력하게 되면?
- 브라우저가 html 파일을 request
- html파일을 서버에게 받아서 loading
- html을 한줄한줄씩 scripting하여 DOM/CSSOM요소로 변환
- 브라우저 window에 표기하기 위해 준비:rendering
- rendering tree를 만들어 각각의 요소들이 어떤 위치에 얼마나 크게 표기될건지 계산: layout
- 그림을 그림: painting
이 과정을 파트로 나눠보면
- contruction: html을 브라우저가 알아들을 수 있도록 브라우저만의 언어로 바꿈
- operation: 만들어진 브라우저가 이해할 수 있는 rendering tree를 이용해 구조 작성, 어디다 배치 등을 계산한 다음 실제 브라우저 window에 그림을 그림
layout
RenderTree(DOM, CSSOM)를 이용해서 window 위에서 요소별로 배치, 크기조정 등 레이아웃 구상하는 역할
paint
📍 layout에서 계산한 요소들을 바로 브라우저에 그리는 것이 아님
- 해당 요소를 어떻게 배치했느냐에 따라 각각 부분을 조금 조금씩 잘게 나누어서 이미지를 준비해 놓음
- 각각의 요소들은 컴퓨터가 이해할 수 있는 이미지인 비트맵 데이터 형태로 변환하게 됨
- 요소별로 따로따로 나누어 계산이 됨
즉, CSS에서 z-index를 쓰게 되면, 요소별로 묶어서 그리게 됨
(꼭 z-index 별로 아니라 다양한 속성값에 따라 브라우저 엔진마다 성능 개선을 위해 레이어를 만듦)
👉🏻 만약 실수했다?
전체 레이어를 다 건드리지 않고, 실수한 해당 부분의 레이어만 작업하면 되니까 성능이 더 좋음
will-change
요소: 이 부분 속성값은 opacity가 변화될지도 몰라
브라우저: ㅇㅋ. 그럼 널 새로운 레이어에 추가해놓을게. 너만 opacity 바뀌면되게 만들어 놓을게.
※ 속성값을 너무 많이 만들지 마라
브라우저가 불필요하게 쓸데없는 레이어를 많이 만들어놓을 수 있기 때문임
📌 각각 요소마다 새로운 레이어를 만들어 너무 많은 레이어가 만들어지면 성능 저하
composition
위 과정을 통해 미리 준비한 레이어를 순서대로 차곡차곡 브라우저 위에다가 표기하면 됨
To sum up
Construction
✔ html 페이지에서 render tree를 만들때까지 어떻게 하면 빠르게 만들 수 있을까?
- 당연히 DOM 요소가 작으면 작을수록
- CSS 규칙이 작으면 작을수록
- Tree가 작아지기 때문에 빠르게 만들 수 있다.
👉🏻 따라서
- 불필요한 태그를 쓴다던지
- 불필요하게 div 태그를 남용한다던지
- 쓸데없이 wrapping class가 wrapping 요소를 만든다던지
이런 것들을 자제해야 한다.
최대한 요소들을 작게 만드는 것이 중요하다.
Operation
우리가 처음에 사용자에게 표기하는 것도 중요하지만..
- 나중에 사용자가 클릭을 해서 요소를 움직이거나
- 애니메이션을 쓸 때
paint가 자주 일어나지 않도록 만드는 것이 중요하다.
ex. 페이지 내 네모박스를 translate으로 조금만 오른쪽으로 움직인다면?
-
paint는 일어나지 않음
b/c 레이어가 이미 준비되어있기 때문에 composition만 일어나면 됨
레이어만 움직이면 되기 때문에 성능 괜찮게 움직일 수 있음 -
헌데 이동할 때 paint가 다시 일어난다?
안좋음 ㅜㅜ
최악은 layout이 다시 일어나는 것 !!
박스 하나를 움직였다고 다른 주변것들의 포지션까지 바뀌어야 한다면
👉🏻 브라우저는 다른 요소들까지 변경해야 해서 layout부터 시작하여 paint, composition이 일어나야 함.
따라서 자바스크립트나 CSS로 DOM요소를 조작할 때
- composition만 일어났다? 베스트 케이스
- paint가 다시 일어났다? 뭐 나쁘진 않지만 썩 좋지도 않음
- layout이 다시 일어났다? 정말정말 최악
- 애니메이션을 하는데 layout이 일어나야 된다고 하면, 과연이 이 애니메이션이 필수적일까? 라고 생각해보는 것이..
