웹 트래픽 분석 사이트 https://gs.statcounter.com/ 의 브라우저 통계에 따르면 크롬의 점유율이 65퍼 사파리의 점유율이 20퍼인걸 볼 수있다. 세계적으로 많은 사람들이 크롬을 쓰고 있는데 웹관련 직종이라면 크롬의 작동원리정도는 알면 작업하는데에 있어 많은 도움이 될꺼라고 생각해서 웹 브라우저의 동작원리를 정리해보게 되었습니다.
웹 서버
웹서버의 역할
- 웹 브라우저로 부터 HTTP를 요청 받음
- 웹 브라우저에게 필요한 정보를 반환해 준다.
- 웹 브라우저에 출력이 된다.
예시
크롬으로 부터 https://youtube.com 라는 요청을 받고 YouTube를 반환해줘서 우리가 YouTube를 시청할 수 있다.
HTTP는 Hyper Text Transfer Protocol의 약자이며 하이퍼 텍스트를 전송하는 통신 규약이다
보통 웹 서버와 브라우저는 각각 다른 컴퓨터에 위치한다. 웹 서버가 다른 컴퓨터에서 실행되기 때문에 브라우저를 서버에 연결하려면 서버가 실행중인 컴퓨터의 IP 주소를 알아야되는데 많은 숫자들로 구성되어 있어서 외우기 쉽지 않다. 일반 사람들이 도메인 주소를 치게되면 DNS를 통해 IP주소로 변환이되어서 웹 페이지를 볼 수 있다.
웹 브라우저
웹 브라우저는 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것
브라우저의 기본 구조
- 사용자 인터페이스: 주소 표시줄, 이전/다음 버튼, 북마크 등 페이지 뷰 이외의 다른 부분
- 브라우저 엔진: 사용자 인터페이스와 렌더링 엔진 사이 동작을 제어
- 렌더링 엔진: HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시
- 통신: HTTP요청과 같은 네트워크 호출에 사용됨
- JS 엔진: 자바스크립트 코드를 해석하고 실행
- UI 백엔드: 기본적인 위젯(콤보 박스 등)을 그림
- 자료 저장소: 자료를 저장하는 계층으로 쿠키 등을 저장하는 웹 데이터베이스
크로스 브라우징 이슈
위에 렌더링 엔진이 HTML, CSS를 파싱해 화면에 요청한 컨텐츠를 표시하는데 각 브라우저마다 사용하는 렌더링 엔진이 각각 다르기 때문에 크로스 브라우징 이슈가 발생한다.
렌더링 엔진 동작 과정
기본적인 동작 과정
- HTML을 파싱하여 DOM 노드를 만든다. 이 DOM 노드들을 병합하여 DOM 트리를 만든다.
- CSS를 파싱하여, CSSOM(CSS Object Model) 트리를 만들게 된다.
HTML과 CSS는 단순한 텍스트 이므로 각각 연산과 관리가 가능하도록 HTML Parser와 CSS Parser를 사용해 관리가 가능한 Object Model로 만든다.HTML 파싱과 DOM 생성 과정
서버는 브라우저로부터 요청받은 HTML 파일을 읽고 메모리에 저장하고 메모리에 저장된 바이트(10110100..)을 응답한다. 브라우저는 응답받은 바이트 형태의 문서를 meta태그의 인코딩 방식에 따라 문자열로 반환하고 문자열로 변환된 HTML문서를 이번에는 문법적 의미를 갖는 코드의 최소 단위 토큰으로 분해한다. 토큰들의 내용에 따라 객체로 변환하여 각 노드들을 생성한다. HTML은 모든 노드들을 트리 구조로 구성하여 DOM을 만든다.CSS 파싱과정
렌더링 엔진은 HTML문서를 위에서 부터 한줄 한줄 순차적으로 파싱하며 DOM을 생성하다가 link 또는 style태그를 만나면 DOM생성을 중지한후 CSSOM을 생성한다.
JavaScript 파싱과정
렌더링 엔진은 HTML문서를 위에서 부터 한줄 한줄 순차적으로 파싱하며 DOM을 생성하다가 script 태그를 만나면 DOM 생성을 일시 중단하고 script 태그의 src에 정의된 JS파일을 서버에 요청하여 응답받으면 JS 코드를 파싱하기 위해 JS 엔진에게 제어권을 넘긴다. JS 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어나간다. 만약 생성되지 않음 DOM을 조작한다면 에러가 발생한다.
렌더 트리 구축
렌더링 엔진에서 text를 Parser를 통해 DOM트리로 변환시킨 DOM트리와 CSSOM트리가 합쳐져 렌더 트리를 형성한다. 렌더 트리는 화면에 표시되는 각 노드의 위치를 계산하는 레이아웃에 사용되고 필셀을 화면에 그리는 페인트 과정에도 사용된다.
렌더 트리를 생성하려면 브라우저는 대략 3가지 작업을 수행한다. 렌더 트리가 DOM 트리의 노드를 각각 모두 탐색한후 화면에 표시되는 노드들을 찾아 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.렌더 트리 배치 ( Layout or Reflow )
렌더 트리가 형성되고 기기의 뷰포트 내에서 렌더 트리의 노드가 정확한 위치와 크기를 계산한다. 이때 모든 상대적인 값 %, rem, vh가 절대적인 값인 px 단위로 변환 된다. 이 과정을 배치( Layout 또는 Reflow ) 라고 한다.
특정 액션이나 이벤트에 따라 HTML요소의 크기나 위치 등의 레이아웃 수치가 변하면 해당 요소의 영향을 받는 자식 노드나 부모 노드들을 포함하여 다시 Reflow 과정을 수행하게 된다.
- 뷰포트 내에서 렌더 트리의 노드의 정확한 위치와 크기를 계산하는 과정
- 화면의 구조가 바뀌었을 경우
화면의 구조가 변경되지 않는 화면 변화의 경우 Repaint만 발생한다. ex) opcity, background-color, visibility, outline 등렌더 트리 그리기 ( Paint )
렌더 트리의 각 노드를 화면의 실제 픽셀로 나타낼 때 Painting메서드가 호출된다. Painting 과정 후 브라우저 화면에 UI가 나타나게 된다.그리기 순서
실제로 요소가 stacking contexts에 쌓이는 순서는 아래와 같다. 스택은 뒤에서 앞으로 그려지기 때문에 이 순서는 Paintin에 영향을 미친다. 블록 렌더러가 쌓이는 순서는 다음과 같다.
1. 배경색
2. 배경 이미지
3. 테두리
4. 자식
5. 아웃라인
- 화면에 변화가 있을 때 화면을 그리는 과정.
- Repaint가 발생하는 경우는 화면이 변경되는 모든 경우
Reflow가 일어나는 대표적인 경우
- DOM 노드의 추가, 제거, 위치 변경, 크기 변경
- CSS 애니메이션과 트랜지션
- 폰트 변경, 텍스트 내용 변경
- 이미지 크기 변경
- 페이지 초기 렌더링
