1. 웹 브라우저 구성 요소
| 사용자 인터페이스 (User Interface) | 사용자가 브라우저와 상호 작용하는 부분 - 브라우저 상단의 앞으로/뒤로가기/새로고침 버튼, 검색창 등 브라우저 프로그램 자체의 GUI를 구성하는 부분 - 사용자가 원하는 웹 페이지 요청, 브라우저 기능 제어 |
| 브라우저 엔진 (Browser Engine) | 사용자 인터페이스와 렌더링 엔진 사이에서 동작을 제어하는 핵심 엔진 - 웹 페이지를 요청하고, 렌더링 엔진에 필요한 데이터(HTML, CSS, JavaScript)를 전달하는 역할 ex) 사용자 인터페이스의 뒤로 가기 버튼 클릭 시 렌더링 엔진에 전달 - 브라우저라는 프로그램의 비즈니스 로직, 핵심 중추 역할 - Data Storage를 참조하며 로컬에 데이터를 쓰고 읽으면서 다양한 작업을 함 |
| 렌더링 엔진 (Rendering Engine) | 웹 페이지의 내용을 해석하고 화면에 표시하는 엔진 - 사용자가 요청한 콘텐츠를 화면에 출력하는 역할 - HTML, CSS, JavaScript 코드를 파싱하여 DOM 트리와 렌더 트리를 생성하고, 레이아웃 및 페인팅 과정 수행 |
| 네트워크 (Networking) | 웹 브라우저의 네트워크 담당 - HTTP를 요청할 수 있으며 네트워크를 호출 |
| JavaScript Interpreter | JavaScript 코드 해석 및 실행 ex) V8 엔진 |
| UI Backend | 기본적인 위젯을 그리는 인터페이스 - 사용자 입력, 마우스 움직임, 클릭 등을 핸들링 |
| Data Storage | Local Storage, Session Storage, Indexed DB, 쿠키 등 브라우저 메모리를 활용한 저장소 |
2. 사용자가 URL 검색창에 'www.example.com ' 입력 시
1. 브라우저는 우선 브라우저 캐시에서 요청한 도메인의 IP를 갖고 있는지 확인
2. 없다면 hosts 파일과 OS 캐시에서 IP 확인 후 없으면 Local DNS 서버 캐시 확인
3. 없다면 Local DNS 서버는 Root DNS 서버에 'www.google.com' 도메인에 대한 IP를 어디서 찾을 수 있는지 요청
4. Root DNS 서버는 .com으로 끝나는 도메인들을 담당하는 서버의 IP 주소 반환
5. Local DNS 서버는 해당 주소를 받아 최상위 도메인 서버에 요청
6. 최상위 도메인 서버는 google.com 도메인 정보를 가진 DNS 서버 IP 주소 반환
7. 최상위 도메인 서버에서 반환받은 IP 주소 확인 후 sub domain 서버를 찾아가 example.com여로 호스트 네임별 IP 주소가 있고, www.example.com의 IP 주소를 얻어 비로소 www.example.com 서버로 접속
3-1. 브라우저 렌더링 과정
브라우저에서 리소스를 요청하여 HTML, CSS, JavaScript 파일을 받으면
- HTML을 파싱 후 DOM(Document, Object, Model) 트리를 구성
- utf-8 인코딩된 이진 데이터를 디코딩하여 문자로 변환 (Bytes -> Characters)
- <body>Hello, <span>world!</span></body>와 같이 단순 문자열로 변환된 데이터를 토큰화
- 문자열을 한 글자씩 읽어가며 열린 태그(Start Tag Token)와 닫힌 태그(End Tag Token)를 체크하여 태그를 토큰화
- 토큰을 의미있는 값으로 만들기 위해 객체화(Object) === 노드
- 노드의 관계 설정 === 모델(Model)
- CSS를 파싱 후 CSSOM 트리를 구성
- 위와 같은 방식으로 동작
- JavaScript 실행
- JavaScript가 실행되는 동안 DOM 파싱 멈춤
- JavaScript의 이벤트 핸들링으로 인해 DOM의 요소가 바뀔 수 있기 때문
- 만약 DOM이 그려지기 전에 JavaScript가 실행되어 아직 그려지지 않은 특정 요소에 이벤트를 걸었을 경우
해당 요소를 찾을 수 없으므로 에러 발생 > JavaScript는 하단에 배치하여 에러 방지 - 만일 JavaScript가 실행되는 동안 DOM이 파싱되도록 하기 위해서
<script src="" defer>와 같이 defer 혹은 async를 추가
- DOM과 CSSOM을 조합해 렌더 트리 구축
- 웹 페이지의 화면 렌더링을 위한 핵심 데이터 구조
- display: none; 과 같이 당장 화면에 그려지지 않는 요소는 렌더 트리에서 제외됨
3-2. 브라우저 그리기
- Layout (배치)
- 렌더 트리의 각 노드에 대해 그 크기와 취를 계산하는 과정
- 이 과정에서 각 요소의 크기, 위치, 여백, 패딩 등이 결정됨
- Paint
- 실제로 그리는 단계
- 여러개의 레이아웃을 겹쳐서 그림
- Composite
- 그려진 레이아웃을 하나로 합치는 과정
- Reflow
- 웹 페이지에 이미 레이아웃이 완료된 후, 특정 요소의 크기나 위치에 변화가 생길 경우
해당 요소와 관련된 부분의 레이아웃을 다시 계산하는 과정 - 사용자가 창 크기를 조절하거나, JavaScript를 통해 요소의 스타일을 변경할 때
- 노드 추가 또는 제거 시
- Reflow가 자주 발생할 경우 성능이 떨어질 수 있음
- 웹 페이지에 이미 레이아웃이 완료된 후, 특정 요소의 크기나 위치에 변화가 생길 경우
+) 웹 사이트 성능을 향상시키는 방법
- 소스의 사이즈 줄이기 (바이트 수 줄이기)
- 외부에서 가져오는 리소스양 줄이기
- media 쿼리, 불필요한 파일
- 외부 파일 가져오는 횟수 줄이기
- 인라인으로 처리
- Reflow, Repaint 줄이기
- left, right 대신 transform 사용 등
'Front-end' 카테고리의 다른 글
| SSG / SSR / CSR 개념 및 차이점 (0) | 2024.10.30 |
|---|---|
| [Servlet / JSP] 서블릿과 JSP의 기본 개념 (0) | 2021.09.07 |
| [JSP] 커스텀 태그 (1) - 태그 파일 기반 (0) | 2021.09.02 |
| [JSP] 표현 언어 EL - View를 View답게! (0) | 2021.09.02 |
| [JSP] 액션 태그 (2) - Java Bean (useBean, setProperty, getProperty) (0) | 2021.08.28 |
