웹 서버와 웹 브라우저의 통신 방법
웹 서버에 위치한 index.html파일을 웹 브라우저가 해당 웹서버의 IP주소로 요청을 한뒤 html결과값을 웹 브라우저로 받아와 렌더링과정을 거쳐 화면에 뛰어주게 된다.
랜더링이란 html,css,JavaScript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.
아래 이미지는 웹이 만들어지는 일련의 과정이다
Backend Time(서버)과 Frontend Time(브라우저)으로 구분하여 웹 이 어떻게 화면에 표시되는지 보여준다.
기본적으로 브라우저마다 렌더링을 수행하는 렌더링 엔진이 존재한다, 렌더링 엔진은 HTML 및 XML 문서와 이미지를 표현한다
웹 프로그래밍 하며 사용되는 도구(태그,선택자)들 마다 엔진에 호환범위가 다르기 때문에 각각 엔진마다 개발자가 의도하지 않게 웹 페이지가 동작 할 수 있다 ( w3c에서 정한 웹 표준 명세가 있기 때문에 대부분 비슷하게 보여줄 수 있다 )
렌더링의 실행과정을 알아보자
전체적인 랜더링 과정은 총 6단계로 나눠진다
html,css,js 에서부터 출발해서
1. DOM
2. CSSOM
3. Render Tree
4. Layout
5. Paint
6. Composite
과정을 거친뒤 웹 페이지가 로드된다.
렌더링은 웹 브라우저가 진행하는가? 웹 서버가 진행하는가?
결론부터 말하자면 브라우저, 서버 둘다 과정을 거치게된다, 웹 서버에서 구현된 코드를 읽어 드린뒤 DOM 방식을 거쳐
CSSOM로 표현된뒤 Render Tree가 생성된다 이후 브라우저에서 Layout 작업, Paint, Composite를 거친뒤 웹 페이지가
생성되게 된다.
렌더링 단계별 프로세스 알아보기전에 브라우저 기본 구조의 대해 알아보자.
브라우저 기본 구조
브라우저는 크게 화면을 조정하는 영역과 데이터를 조정하는 영역으로 구분 할 수 있다.
사용자 인터페이스 : 사용자가 브라우저에서 직접 조작 할 수 있는 영역
브라우저 엔진 : 사용자 인터페이스가 렌더링 엔진에 쿼리를 전달 할 수 있게 조작을 담당
렌더링 엔진 : html과 css문서를 파싱 / 해석 하여 화면에 표현
네트워킹 : http 요청을 할 수 있고 네트워크 호출할 수 있는 영역
자바스크립트 해석기 : JavaScript 코드를 해석하고 실행
UI 백엔드 : select / input 등 기본적인 위젯을 기리는 인터페이스
자료저장소 : Cookie, Local storage등 모든 자료를 저장하는 영역
< 실행과정 설명 > (브라우저의 렌더링 엔진별로 크게 차이가 없음)
웹브라우저가 서버로부터 HTML문서 다운 => 랜더링 엔진이 HTML 문서를 파싱한뒤 렌더링 트리생성 =>
UI Backend에서 각 노드를 확인 => 화면에 출력하기 시작
브라우저의 대해 어느정도 숙지가 되었다면, 본론으로 들어와 렌더링의 6가지 프로세스를 살펴보자
1. DOM ( Document Object Model )
DOM은 HTML 마크업을 DOM모델로 변환하는 기술이다, HTML 요소들이 객체기반으로 구조화 될 수 있도록 가공한다
즉 웹 페이지에 대한 프로그래밍 인터페이스라고 볼 수 있다.
DOM 변환 가정은 아래와 같다
1. 변환 : 브라우저가 HTML의 원시 바이트를 디스크나 네트워크에서 읽어온뒤 해당 파일에 대해 지정된
인코딩(Ex : UTF-8)에 따라 개별 문자로 변환한다
2. 토근화 ; 브라우저가 문자열을 W3C(World wide Web) HTML5 표준에 지정된 고유 토큰 으로 변환한다, 각 토큰은 특별한 의믜와 고유한 규칙을 가지게된다
3. 렉싱 : 방출된 토큰은 해당 속성 및 규칙을 정의하는 '객체'로 변환된다.
4. DOM 생성 : 마지막으로, HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결된다, 이 트리 데이터 구조에는 원래 마크업에 정의된 상위-하위 관게도 포함된다,
즉 HTML 객체는 Body 객체의 상위이고, Body는 단락(paragraph) 객체의 상위인 식이된다.
2. CSSOM ( CSS Object Model )
브라우저는 DOM을 생성하는 단계에서 외부 CSS 스타일 시트 링크 태그를 접하게된다(HTML 마크업내에 직접 할 수 있지만 디자이너와의 분업을 위해), 페이지를 렌더링 하는데 이 리소스가 필요하다고 판단하게될때 브라우저는 이 리소스에 대한 요청을 즉시 발송하고 결과를 반환 받는다.
결과를 반환 받는 과정은 HTML과 마찬가지로 CSS형식에 DOM프로세스를 반복하여 CSSOM이라는 트리구조를 만든다
브라우저가 HTML 마크업을 처리할 때마다 위의 모든 포로세스를 거친뒤 DOM 트리를 빌드한다.
HTML과 CSS가 트리구조를 가지게 되는 이유는 연산과 관리가 유리하도록 하기 위해서이다.
DOM트리와 CSSOM트리 구조가 생성된 이후 실질적으로 화면에 픽셀을 찍기위해 Render Tree 단계로 넘어간다
3. Render Tree
DOM Tree(컨텐츠)와 CSSOM Tree(컨텐츠 스타일 설정)중 불필요한 노드(display:none,script,meta등)를 건너뛰어 실제 화면에 표현되는 노드를 묶어서 Render Tree를 생성한다.
여기서 중요한 것은 렌더 트리는 DOM 요소에 부합하지만 불필요한 노드를 추가하지 않기 때문에 1:1 대응관게는 아니다
화면에 표시되는 모든 노드의 콘텐츠 및 스타일 정보를 모두 포함한 렌더 트리가 생성되면 이를 페이지에 배치하기 시작한다 이를 리플로(reflow)라 부른다.
4. Layout (경우에 따라 리플로우 단계라고도 한다)
렌더링 트리가 생성되었지만 브라우저의 그래픽영역(Viewport) 내에서 요구하는 사이즈에 맞게 리플로 하기위해 각 노드들의 정확한 위치와 크기를 계산한다
그래픽 영역을 Viewport이라고 한다, 브라우저 또는 디바이스에 따라 크기가 달라진다
Layout 계산이 완료되어 각 노드의 정확한 위치를 가지게 되면 요소들을 픽셀로 변환 시켜 실제 화면으로 그리게 된다.
5. Paint
Paint는 Render Tree를 화면의 픽셀로 변환하는 프로세스 이다, 텍스트,이미지 경게 및 그림자 등
일반적으로 그리기는(픽셀로 변환하는) Layer라는 표면에서 수행된다.
Render Tree를 구현하기위해 처리 해야 하는 스타일이 복잡할수록 Paint 단게에 소요되는 시간이 늘어나게 된다.
6. Composite
사용된 HTML이나 CSS속성에 따라 여러개의 Layer가 생성된 경우, 생성된 Layer들을 합성하여 한장의 bitmap으로 만드는 과정이다.
아래 영상을 통해 Render Tree 생성 이후 Layout, Paint(Rasterize), Composite Layer 과정을 시각적으로 확인할 수 있다
www.youtube.com/watch?time_continue=26&v=ZTnIxIA5KGw&feature=emb_title
전체적인 웹 렌더링 과정을 알아보았다
다음 포스팅에서는 위와 같은 렌더링 작업을 최적화 하기 위한 방법들에 대해서 알아보자.