Web browser - HTML 문서와 그림, 멀티미디어 파일등 월드 와이드 웹을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램의 총칭
-. 웹 브라우저와 웹 서버의 통신과정
브라우저의 주요 기능 - 사용자가 자원을 서버에 요청하고 요청한 자원을 브라우저에 표시하는 것
웹 브라우저 → 웹 서버 : 요청(request)
웹 서버 → 웹 브라우저 : 응답(response)
웹 브라우저가 웹 서버에 연결하려면, 웹 서버가 실행중인 컴퓨터의 주소를 알아야하는데, 이 주소를 IP 주소라 한다.
각 컴퓨터는 IP주소를 가지고 있다. 숫자로 구성되어있어 외우기 쉽지않아 도메인 이름을 사용하는데
브라우저와 서버는 IP주소를 이용하여 연결해야하기 떄문에 DNS(Domain Name Server)을 이용하여 도메인 네임을 IP주소로 변환할 수 있다.
-. 웹 브라우저의 주요 기능
- URL을 입력할 수 있는 주소 표시 줄
- 이전 버튼과 다음 버튼
- 북마크
- 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
- 홈 버튼
-. 브라우저의 기본 구조
-. 렌더링 엔진
요청받은 내용을 브라우저 화면에 표시해주는 역할
브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에 모든 브라우저가 동일한 소스를 화면에 동일하게 그려주지 않고 엔진마다 읽을 수 있는 코드의 버전도 다르기 때문에 크로스 브라우징 이슈가 발생하곤 한다.
-. 렌더링 엔진의 기본적인 동작 과정
HTML 파싱하여 DOM 노드 -> DOM 노드 병합 -> DOM 트리
CSS 파싱 -> CSSOM(CSS OBJECT MODEL) 트리
-. CSS 파싱과 CSSOM 생성 과정
렌더링 엔진은 HTML문서를 한줄 한줄 순차적으로 파싱하며 DOM 생성을 하는데 중간에 CSS 로드하는 link 태그 혹은 style 태그를 만나면 DOM 생성을 중지하고 CSS파싱의 결과물인 CSSOM 생성 과정을 진행한다.
HTML 파싱 과정과 동일하다. (바이트>문자>토큰>노드>CSSOM)
-. 렌더 트리 그리기
그리기 순서
1. 배경색
2. 배경 이미지
3. 테두리
4. 자식
5.아웃라인
-. Repaint & Reflow
Repaint - 화면의 구조가 변경되었을 때에는 Reflow 과정을 거쳐 화면 구조를 다시 계산한 후 Repaint 과정을 통해 화면을 다시 그린다. 구조가 변경되지 않으면 repaint만 일어난다.
Reflow - 화면의 구조가 바뀌면 Reflow 과정이 일어난다.
