주제: 우리가 보는 화면은 어떻게 만들어질까?
소주제: HTTP통신부터 브라우저 렌더링까지
참고 자료:
- https://d2.naver.com/helloworld/59361
- <비전공자를 위한 이해할 수 있는 IT지식>, 최원영, 티더블유아이지
사용자 인터페이스(UI)의 주소표시줄에 naver.com 을 입력한다
- HTML,CSS,JS 원본이 있는 서버로부터
통신을 통해
HTML을 다운로드 받고, 그에 연결된 CSS, JS, 이미지,폰트,영상 등을 받음
- HTML 문서 파싱
(파싱: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환)- 콘텐츠 트리 내부에서 태그를 DOM노드로 변환
- 외부CSS파일(스타일 요소) 파싱
- 렌더 트리를 생성: 스타일 정보, HTML표시 규칙에 따름. 렌더 트리가 가진 색,면적 등 속성의 사각형을 정해진 순서대로 화면에 표시
- 렌더 트리 배치: 화면에서 각 노드를 정확한 위치에 표시
UI 백엔드에서 그리기 과정: 렌더 트리의 각 노드를 가르질러 형상 만듬
- 네이버 페이지가 화면에 보임
- 필요 시, 다운 받은 HTML, CSS, JS 사본이 서버로 API 요청 보냄
데이터베이스를 가진 서버가 요청 처리하고 응답 보냄...(과정)...
브라우저
-
주요 기능:
사용자가 선택한 자원(HTML문서, 이미지, PDF 등)을 서버에 요청
-> HTML, CSS명세에 따라 브라우저가 HTML문서를 해석하고 화면에 표시 -
구성 요소:
1)사용자 인터페이스(UI): 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등.
2)브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 간 동작 제어.
3)렌더링 엔진: 요청한 콘텐츠를 표시. (HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시)
4)통신: HTTP 요청과 같은 네트워크 호출에 사용됨. 이것은 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨.
5)UI 백엔드: 콤보 박스와 창 같은 기본적인 장치를 그림. 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용.
6)자바스크립트 해석기: 자바스크립트 코드를 해석하고 실행.
7)자료 저장소: 자료를 저장하는 계층. 쿠키 저장 등 모든 종류의 자원을 하드 디스크에 저장. (HTML5 명세 - 브라우저가 지원하는 '웹 데이터 베이스'가 정의됨).
*크롬: 각 탭마다 별도의 렌더링 엔진 인스턴스를 유지. 각 탭은 독립된 프로세스로 처리.
렌더링엔진
-
주요 기능: 요청받은 HTML, XML, 이미지 등을 브라우저에 표시
-
통신으로부터 요청한 문서의 내용(8KB 단위 전송)을 얻는 것으로 시작
1) HTML 문서 파싱
2) 콘텐츠 트리 내부에서 태그를 DOM노드로 변환
3) 외부CSS파일(스타일 요소) 파싱
4) 렌더 트리를 생성: 스타일 정보, HTML표시 규칙에 따름. 렌더 트리가 가진 색,면적 등 속성의 사각형을 정해진 순서대로 화면에 표시
5) 렌더 트리 배치: 화면에서 각 노드를 정확한 위치에 표시
6)UI 백엔드에서 그리기 과정: 렌더 트리의 각 노드를 가르질러 형상 만듬
-
특징
1) 과정들이 점진적으로 진행된다
2) 좀 더 나은 사용자 경험(UX)을 위해 가능하면 빠르게 내용을 표시
3) 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작
: 받은 건 표시, 받지 않은 건 기다림
파싱*
- 문서 파싱: 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환.
- 파싱 결과: 문서 구조를 나타내는 노드 트리.
= 파싱 트리(parse tree), 문법 트리(syntax tree).
- 파싱의 구분: 어휘 분석(자료를 유효단위 집합(토큰)으로 분해), 구문 분석(언어 구문 규칙 적용)
- 어휘 분석기(토큰 변환기): 공백, 줄바꿈 등 무의미한 문자 제거
- 파서: 언어 구문 규칙에 따라 문서 구조를 분석해 파싱 트리 생성
HTML 파서
- HTML 마크업을 파싱 트리로 변환
- 파싱 알고리즘
HTML은 일반적인 파싱 기술(상향식 파싱, 하향식 파싱)을 사용할 수 없음
따라서, 브라우저는 별도의 파서 생성, 알고리즘(토큰화, 트리구축)
상태기계(같은 문자 읽어도 현재 상태에 따라 다음 상태의 결과 달라짐) - 문법: 문맥 자유 문법이 아님.
HTML DTD
DOM
CSS 파싱
- 일반적인 파서 문법을 사용할 수 있음.
- 문법: 문맥 자유 문법임.
스크립트와 스타일시트 진행 순서
