[Web] 브라우저 동작원리

웹 브라우저 저장소의 동작원리에 대해 정리한 포스팅입니다.

---

✅ 브라우저 주요 구성요소

브라우저는 다음 이미지와 같은 구성요소로 이루어져 있습니다.

✔ 사용자 인터페이스

주소 표시줄, 이전/다음버튼, 북마크 등 사용자가 활용하는 서비스들 (요청한 페이지를 보여주는 창을 제외한 나머지 부분)

✔ 브라우저 엔진

사용자 인터페이스와 렌저링 엔진 사이의 동작 제어

✔ 렌더링 엔진

요청한 콘텐츠 표시

✔ 통신

http 요청과 같은 네트워크 호출에 사용 (플랫폼의 독립적인 인터페이스로 구성되어있음)

✔ UI 백엔드

플랫폼에서 명시하지 않은 일반적 인터페이스. 콤보박스 창 같은 기본적 장치를 그림

✔ 자바스크립트 해석기

자바스크립트 코드를 해석하고 실행

✔ 자료 저장소

쿠키 등 모든 종류의 자원을 하드 디스크에 저장하는 계층

✅ 브라우저는 어떤 과정으로 동작하나요?

1. 주소창에 url을 입력하고 enter를 누르면, 서버에 요청이 전송됩니다.
2. 해당 페이지에 존재하는 여러 자원들이 전송됩니다.
3. 렌더링 엔진이 html 파싱과 css파싱을 통해 렌더 트리를 만듭니다.
4. 화면에 배치가 시작되고, UI백엔드가 노드를 돌며 형상을 그립니다.

✅ 브라우저는 렌더링은 어떤 과정으로 동작하나요?

1. HTML 마크업을 처리하고 DOM 트리를 빌드합니다. (“무엇을” 그릴지 결정)
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다. (“어떻게” 그릴지 결정)
3. DOM 및 CSSOM을 결합하여 렌더 트리를 빌드합니다. (“화면에 그려질 것만” 결정)

1. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다. (“Box-Model”을 생성한다.)
2. 개별 노드를 화면에 페인트한다. (or 래스터화)

🔗 참고

• 브라우저는 어떻게 동작하는가?-naver D2