랜더링 과정
처음 실행 FLOW
•
처음 들어갔을때 브라우저는 HTML을 찾는다
◦
브라우저가 이해할 수 있는 언어는 4가지다.
▪
HTML, CSS, Javascript, Web assembly
•
HTML을 다운을 받고, 다운로드 받으면서 위에서 아래로 읽어나간다
◦
이때 link, script, img 와 같은 특수 태그들을 찾는다
▪
link : 외부 리소스를 사용할때(주로 CSS를 불러올때) CSS를 만나면 CSS도 다운로드를 받는다
▪
script : Javascript를 만나면 잠시 랜더링을 멈춘다(가장 중요한 개념이다. 스크립트의 해석이 다 끝나기 전까진 랜더링을 시작히자 않는다)
▪
img : 이미지도 외부 리소스이기때문에 다운로드를 받는다
•
이렇게 다운로드 받은 HTML, CSS를 리딩(파싱)을 하는데 HTML을 파싱해서 생기는게 DOM이고, CSS를 파싱해서 만든게 CSSOM이다
•
DOM과 CSSOM을 결합해서 만드는게 Render Tree이다
•
Render Tree가 생성이 되면 이제 그리는 작업을 실행하게 된다
그리는 작업
•
Layout을 실행한다(ReFlow)
◦
배치요소들을 어디에 배치할지를 결정한다
•
Paint를 실행한다(RePaint)
◦
Paint과정을 거쳐야지 우리가 보는 브라우저 화면이 나오게 된다
•
위에 Paint까지 끝나야 Render라고 한다. 화면에 모두 그려졌다라고 생각하면 될 것 같다!
꼭 알아야할 것들
Web의 특징
•
Web에서는 60fps를 유지시켜줘야한다.
◦
유지시켜야만 하는 이유는 web에서 60fps를 유지해야 유저가 부드럽게 동작한다고 인지를 한다고 한다고
•
60fps를 유지시킨다고 가정을 해보면, 1fps당 약 16ms가 나온다. 이때 16ms마다 layout, paint 등 모두 작업을 완료해야 60fps를 유지 시킬 수 있다
DOM
•
DOM을 변경하는 경우
◦
다시 Render Tree를 그리고 Layout과 Paint를 다시 실행해야한다
◦
이때 Layout은 생략이 가능하다
◦
Paint는 무조건 실행한다(필수)
Layout
•
Layout 과정은 생략이 가능하다고 했다. 이때 Layout의 과정을 생략시키려면 배치요소가 바뀌지 않았다면 레이아웃 과정을 생략 시킬 수 있다
•
Layout의 특징은 CPU를 많이 쓴다
Paint
•
Paint과정의 특징은 GPU를 많이 쓴다
무엇보다 중요한 것!!
•
Layout은 줄일수록 좋다
◦
성능에 당연히 좋음
◦
대표적으로, left, right, top, bottom 과 같은 속성은 layout을 발생시킨다. 이 속성으로 애니메이션을 만들게 되면 필연적으로 layout의 과정을 거쳐야한다
◦
다른 경우에는 transform이라는 속성이 있다. 이 transform이라는 속성도 이동을 시키는 속성인데, layout을 실행하지 않고, paint만 실행하게 된다.