렌더링 과정을 파헤쳐보자!

hyeji Han·2023년 1월 26일
0

Web

목록 보기
1/1

브라우저의 동작 방법

즉 url이 입력되었을 때, 어떤 과정을 거쳐서 출력되는지?

- 브라우저의 주요 기능

(오픈 소스 브라우저 : 크롬, 파이어폭스, 사파리 등)

사용자가 선택한 자원 (html 문서, pdf, image 등의 형태) 을 서버에 요청하여 브라우저에 표시하는 것이다.
브라우저는 html과 css 명세에 따라 html 파일을 해석해서 표시한다.

- 브라우저의 기본 구조

  • 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 등 사용자가 활용하는 서비스들
  • 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어
  • 렌더링 엔진 : 요청한 콘텐츠 표시 (html요청이 들어오면, html, css파싱해서 화면에 표시함.)
  • 통신 : http 요청과 같은 네트워크 호출에 사용
  • UI 백엔드 : 플랫폼에 명시하지 않은 일반적인 인터페이스
  • 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행함.

- 렌더링이란?

브라우저의 구조 속에 렌더링 엔진이 있었는데 렌더링 엔진은 요청받은 내용을 브라우저 화면에 표시해준다.
기본적으로 HTML, XML 문서와 이미지를 표시할 수 있다.
(크롬, 사파리는 웹킷 엔진을 사용하고 파이어폭스는 게코 엔진을 사용한다.)

🛠 웹킷
웹킷은 최초 리눅스 플랫폼에 동작하기 위한 오픈소스 엔진

- 렌더링 동작과정

  1. DOM 트리 구축을 위해 HTML 문서를 파싱한 후, 콘텐츠 트리 내부에서 태그를 모두 DOM 노드로 변환한다. 그 다음 스타일 요소를 파싱한다.
  2. 이 스타일 정보와 HTML 표시 규칙은 렌더 트리라고 부르는 트리를 생성한다.
  3. 렌더 트리는 정해진 순서대로 화면에 표시되는데 배치가 진행되면서 노드가 화면의 정확한 위치에 표시되는 것을 말한다.
  4. UI 백엔드에서 렌더 트리의 각 노드를 가로지으며 형상을 만드는 그리기 과정이 진행된다.
  5. 이러한 과정이 점진적으로 진행되기 위해 렌더링 엔진은 더 빠르게 사용자에게 제공하기 위해서 HTML의 파싱을 기다리지 않고 배치와 그리기를 시작한다.
  6. 전송 받고 기다리는 동시에 화면에 뜬다. (화면에 점점 나오는 현상이 이 때문이다.)

- DOM이란?

document object model의 줄임말로 html, body와 같은 태그들이 자바스크립트가 활욜할 수 있는 객체로 만들면 문서 객체가 된다.

즉, DOM은 웹 브라우저가 html 페이지를 인식하는 방식을 말한다. (트리구조)

- 파싱과 DOM트리 구축

파싱은 브라우저가 코드를 이해하고 사용할 수 있는 구조로 변환하는 것
문서를 가지고 어휘분석과 구문분석 과정을 통해 파싱트리를 구축함.

결국 파싱과정을 거치면서 서버로부터 받은 문서를 브라우저가 이해하고 쉽게 사용할 수 있는 DOM 트리구조로 변환시켜주는 것이다.

요약

  • 주소창에 URL을 입력하고 enter을 누르면 서버에 요청이 전송됨.
  • 해당 페이지에 존재하는 여러 자원들이 서버에 보내짐.
  • 브라우저는 자원이 담긴 HTML과 CSS를 해석함.
  • 이 역할을 하는 것이 ‘렌더링 엔진’
  • 렌더링 엔진을 우선 html 파싱 과정을 시작하고 html파서가 문서에 존재하는 어휘와 구문을 분석하면서 DOM 트리를 구축함
  • 다음엔 CSS 파싱 시작하여 스타일 구조체로 생성함.
  • 이 2가지를 연결시켜서 렌더 트리를 만든다. 렌더 트리를 통해서 문서가 시각적 요소를 포함한 형태로 구성된 상태이다.
  • 화면에 배치를 시작하고 UI 백엔드가 노드를 돌면서 그림을 그린다.
  • 이때 브라우저에 빠른 화면 표시를 위해 배치와 그리는 과정은 기다리는 동시에 일부분 먼저 진행하고 화면에 표시한다!
profile
갓생 살아보자고! 아쟛

0개의 댓글