[TIL] WEB - browser 렌더링 과정
[TIL]
WEB
브라우저 렌더링 과정
브라우저를 왜 배워야 하는가?
Javascript는 OS나 VM 위에서 실해되는 언어와는 다르게 브라우저에서 HTML, CSS와 함께 실행된다.
따라서, 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능해진다.
브라우저는 HTML, CSS, JS로 작성된 텍스트 문서를 파싱(해석)해서 렌더링(화면에 뿌려줌)한다.
브라우저 렌더링 과정
-
요청과 응답: 브라우저(클라이언트 사이드에서)에서 HTML, CSS, Javascript, 이미지, 폰트 등 렌더링에 필요한(화면에 필요한) 리소스를 요청하고 서버로부터 응답 받는다.
-
브라우저 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 결합하여 렌더 트리를 형성한다.
-
브라우저의 자바스크립트 엔진(크롬의 경우 V8)은 서버로부터 응답된 자바스크립트를 파싱하여 AST 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM/CSSOM을 제어/변경할 수 있다. 변경된 경우 다시 렌더 트리로 결합된다.
-
렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.
1) 요청과 응답
리소스(정적 파일/HTML, CSS, Javascript, Image, Font 등 / 동적 파일/서버가 생성한 동적 데이터)를 서버에 요청하고 응답받는다.
그래서 브라우저(클라이언트)에서 서버에 어떻게 요청을 어떻게 보낼 수 있을까?
보내는 방법은 여러 가지가 있을 수 있다.
보통은 이렇게 간단히 URL을 입력하여 엔터를 쳐서 요청을 할 수 있게 된다.
여기서 URL을 입력할 수 있는 주소창은 브라우저가 제공한다.
(추가로, URL을 바로 입력하는 것 말고도 AJAX를 통해 비동기적으로 서버에 정적 및 도적 데이터를 요청할 수도 있다.)
이러한 요청이 오게 되면, 서버는 디폴트로 정적 파일인 index.html을 응답하여 준다.
그러나, path를 수정하여 다른 정적 파일을 가져올 수도 있다.
그런데, 디폴트로 요청을 했으니까 디폴트 값인 index.html만 보내주는 것인 줄 알 았는데, network devtools를 보면 CSS, JS, image 등등이 같이 응답이 되었다. 누가 요청한 것인가?
그것은 바로 HTML을 파싱하는 도중에 link 태그로 CSS르 부르거나 이미지 파일을 로드 하는 img 태그가 있을 경우 파싱을 중단하고 서버에 해당 리소스 파일을 요청하기 때문이다.
-> HTTP1.1 과 HTTP2.0 HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)이다.
- HTTP1.1 가 HTTP2.0의 차이점
HTTP1.1은 커넥션 하나 당 하나의 요청만 응답 (one connection one request/response)
따라서, 요청하는 리소스의 개수가 비례하여 응답시간이 증가한다.
HTTP2는 커넥션 당 여러 개의 요청 응답 가능하다. 따라서 1.1보다 로드 속도가 50% 빠르다고 한다.
2) 렌더 트리 생성
-> HTML 파싱과 DOM 생성 서버로부터 받은 HTML 문서는꺾쇠와 문자열로 이루어진 순수한 텍스트이다. 이러한 순수한 텍스트 HTML 문서를 브라우저에 렌더링하려면 브라우저가 이해할 수 있는 자료구조 (객체)로 변환하여 메모리에 저장 해야한다.
(바이트->문자->토큰->노드->CSSOM)
브라우저 렌더링 엔진은 응답받은 HTML 문서를 파싱하여 브라우저가 알아들을 수 있는 DOM 객체를 생성한다.
따라서, DOM은?
DOM은 HTML 문서를 파싱한 결과이다.
-> CSS 파싱과 CSSOM 생성 DOM과 같은 파싱 과정을 거쳐 해석하며 CSSOM을 생성한다.
-> 렌더 트리 생성 DOM과 CSSOM이 생성되면 렌더링을 위해 렌더 트리로 결합된다. 이 때, HTML의 화면에 렌더링되지 않는 노드(meta, script 태그 등)과 CSS에 의해 비표시(display: none)되는 노드들은 포함하지 않는다.
[참고 및 출처] 모던 자바스크립트 Deep Dive
댓글남기기