브라우저의 원리

브라우저가 이해할 수 있는 언어는 4가지밖에 없다. html, css, js, wasm

html 파싱 -> DOM(Document Object Model) - html 요소 데이터

css 파싱 -> CSSOM - css 요소 데이터

이 둘을 결합해서 렌더 트리를 만들게 됨

 

렌더 트리를 바탕으로 그리는 일을 수행

1. 레이아웃 - 배치 과정(CPU를 많이 먹음)
2. 페인트 - 그리기 - 이때야 비로소 화면에 나타나게 됨(GPU를 많이 먹음)
3. 렌더 - 다 그려진 상태

 

DOM이 변경 된 경우

• 다시 렌더 트리를 그린다 -> 레이아웃 변경시에는(width, height 변경 시) 다시 배치 -> 페인트는 무조건 다시 함 ->  렌더

 

웹에서 렌더링이 되는 건 모두 60fps를 유지해야 한다. 그래야 유저들이 부드럽다고 느낀다. 

1초당 60프레임이면 1프레임당 0.024초 정도. -> 이 안에 레이아웃도 해야되고 페인트도 해야된다. 

즉  DOM 변경시 1프레임 안에 렌더트리 만들고 레이아웃(변경 시에만), 페인트 다 해야되는 것..

-> 프레임 드랍이 일어나게 됨

SPA, SSR 모두 브라우저 렌더링과 직접적으로 연결이 된다. 

 

레이아웃 변경은 줄일수록 성능에 좋다

레이아웃을 발생시키는 css 속성들에 대해 잘 알고 있어야 한다. 

페인트는 최적화 불가능

 

position, left, top, right, bottom 등과 같은 속성들은 기본적으로 레이아웃을 발생시킨다. 이것들을 가지고 애니메이션을 만들면 60프레임을 보장하기가 거의 불가능하다.

그러나 transform 속성의 translate 값을 쓰게 되면 레이아웃 발생 없이 애니메이션이 가능하다. - 60프레임 유지 가능!!