브라우저의 렌더링 과정

UYeong·2021년 5월 16일

dfsdjkh

목록 보기

1/1

브라우저의 주요 기능

사용자가 선택한 것(보통 HTML 마크업 문서)을 서버에 요청하고 브라우저에 표시하는 것이다.

브라우저 동작의 기본 구조

렌더링 엔진(웹킷) 과 자바스크립트 엔진(웹킷) (그림)

렌더링 엔진(웹킷) (상세그림)

렌더링 엔진 과정

html 파일 > html 파서 > html 파싱 > DOM(=문서 객체) 트리 생성
css 파일 > css 파서 > css 파싱 > CSSOM(=스타일시트 객체) 트리 생성

자바스크립트 엔진 과정

js 파일 > js 파서 > js 파싱 > Syntax 트리 생성

<용어 설명>

파서: 분석기
파싱: 분석하는 것, 즉, 문서의 코드들을 브라우저가 이해할 수 있는 코드로 변환 시키는 것
(브라우저를 이해 시킬려면 객체형태로 만들어서 가져다 줘야 한다.)
ex) html 파일이 파싱과정을 거쳐 브라우저가 이해할 수 있는 DOM 으로 만듦
ex) css 파일이 파싱과정을 거쳐 브라우저가 이해할 수 있는 CSSOM 으로 만듦
DOM: 문서 객체 모델(Document Object Model), html 파일을 객체형태로 표현한 것
(+ Node: DOM을 구성하는 객체 하나하나를 Node라고 표현함.)
CSSOM: CSS 객체 모델(Cascading Style Sheet Object Model), CSS 파일을 객체형태로 표현 한 것
(+ CSSOM 트리 에는 CSS규칙 객체가 포함 되어있다.)

렌더링 엔진 과 자바스크립트 엔진 간의 순서

웹은 파싱 > 실행 순으로 되어있는 동기적인(synchronous) 모델이다.
그래서 위의 렌더링 엔진 과정에서의 html 파서 는 html 파일을 한줄한줄씩 파싱해가다가
script태그(js 파일)를 만나면 파싱을 멈추고, script태그를 서버에서 다운(fetching)받고, 실행(excuting)할때 까지 기다렸다가 실행이 끝나면 다시 남아있는 html을 파싱해간다.

(+ HTML5에서는 script태그에 defer(지연) 라는 속성을 추가하게 되면 script태그를 비동기(asynchronous)로 처리되도록 했다.
따라서 script태그를 만나면 script태그를 다운받고 다운 받는 동안 계속해서 html의 파싱을 해나가고 html이 모두 파싱이 완료된 이후(사용자에게 화면을 보여준 후) 다운 받아진 script태그를 실행되도록 해준다. )