브라우저 렌더링 과정

브라우저에 HTML, CSS가 렌더링 되는 순서

1. 다운로드
2. HTML 준비
3. CSS 준비

사실상 1~3번 과정이 HTML,CSS 파일을 parsing하는 과정이다.

4. HTML,CSS 합치기 (= rendering tree를 만드는 style 과정)
5. 위치 그리기 layout (= reflow)
6. 컬러 입히는 레이어 만드는 과정 paint (= repaint)

7. 마지막으로 레이어를 합성해서 실제 화면에 그리는 과정(Composite)

   브라우저마다 레이아웃,페인트 용어 이름은 다르다.

reflow가 repaint보다 시간이 더 오래걸린다.
위치가 바뀌면 사이즈가 바뀌고 그 사이즈에 맞게 색칠을 해야하기 때문에 리소스를 더 많이 잡아먹기 때문이다!

css 프로퍼티마다 layout,paint,composite가 전부 발생하기도 하고 일부만 발생하기도 한다.
->참고 사이트 : https://csstriggers.com/