브라우저 렌더링 방식

참고

브라우저의 구조

그림 출처: https://d2.naver.com/helloworld/59361

사용자 인터페이스(UI)

주소 표시줄, 이전/다음 버튼, 새로고침 버튼, 북마크 메뉴 등 사용자가 접근할 수 있는 UI 영역

스크린샷 2022-03-31 오전 2.30.21.png

브라우저 엔진

사용자 인터페이스와 렌더링 엔진 사이의 (사용자 입력을 기반으로) 동작 제어

렌더링 엔진

서버에게 요청한 컨텐츠를 브라우저 화면에 렌더링한다. (HTML, CSS 파싱)
- chrome의 webkit, blink 엔진, firefox의 gecko 엔진

통신(Networking)

HTTP 요청과 같은 네트워크 호출에 사용

자바스크립트 엔진(Interpreter)

자바스크립트 코드를 파싱하고 실행한다.
- chrome의 v8 엔진, firefox의 spider Monkey 엔진

자료 저장소(data storage)

cookies, cache, Local Storage, Session Storage 등 웹 스토리지에 데이터를 저장한다.

크롬 브라우저

그림 출처: https://beomy.github.io/tech/browser/browser-rendering/

파이어폭스 브라우저

그림 출처: https://beomy.github.io/tech/browser/browser-rendering/

렌더링을 하기 전에 해야할 일

<aside> ❗ 서버에게 리소스 요청하기

</aside>

그림 출처: https://poiemaweb.com/js-browser

브라우저 주소창에 url을 입력하면 DNS를 통해 IP 주소로 변환되고 이 주소를 갖는 서버에게 요청을 전송

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./style.css">
  <title>세미나</title>
</head>
<body>
  <h1>브라우저 렌더링</h1>
</body>
</html>

HTML 파싱

그림 출처: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model?hl=ko

브라우저는 HTML 문서를 바이트 형태로 응답받고 meta 태그의 charset에 의해 지정된 인코딩 방식의 문자열로 변환된다.
```
<!DOCTYPE html><html><head><meta charset="UTF-8">...</html>
```