브라우저 렌더링 과정

- 브라우저 렌더링 과정

1. html 파일 서버로 요청

1. 접속한 url에서 도메인 네임 부분을 dns 서버로 보내 ip를 받아옴

2. 해당 ip에 html request를 보냄

3. html request를 받은 해당 서버는, 사용자가 요청한 html 파일을 읽어 메모리에 저장

4. 메모리에 저장된 바이트(2진수)를 인터넷에 경유하여 응답.

 

2. html 파싱 dom 트리 생성

1. 브라우저가 html파일을 서버로 부터 받음(바이트 2진수)

2. meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식(utf-8)을 기준으로 문자열로 변환(응답 헤더) 

3. 문자열로 변환된 html 문서를 토큰으로 분해

4. 토큰을 객체로 변환해 노드를 생성 

5. 이 과정은 한 줄 씩 진행된다...

 

2-1. css 파싱 -> cssom tree 생성

1. dom 트리 중간에 link tag(style) 만남 -> css 파싱 -> cssom 트리

2.다시 html 파싱...

 

2.2.  js 파싱 ats 트리 생성

1. script tag 만남 -> js 엔진 작동

2. 토크나이징 -> 합쳐서 ast 생성 (ast 사용으로 ts,babel,pretier 같은 트랜스파일러 구현 가능)

3. ast -> 바이트코드로 변환후 인터프리터에 의해 실행

4. 다시 html 파싱... but async/defer 는 비동기적으로 실행 -> async는 js 파일 완전 로드 후 실행, 이때의 html 파싱은 중단된다. defer는 dom tree 생성 완료 후, 즉 html 파싱 직후 실행된다.

 

3. 렌더 트리 -> layout -> paint

1. dom + cssom tree가 렌더트리를 생성. 이때 렌더 트리는 렌더링된 노드, 즉 css 비표시(display: none) / meta / script tag등은 포함 x

2. layout (위치/크기 등) 계산

3. paint 작업

 

 

 

- 리플로우는 layout 계산을 다시 하는 것이며(노드 추가/삭제, 요소의 크기/위치 변경), 리페인트는 재결합된 렌더 트리를 기반으로 다시 페인트 하는것.