브라우저 렌더링 과정

lynn·2022년 6월 30일
0

TIL

목록 보기
6/7

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

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

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


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

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

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

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

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

profile
개발 공부한 걸 올립니다

0개의 댓글