브라우저의 렌더링 과정

Node.js

-> 자바스크립트 서버?? X

-> 구글의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

-> 서버 사이드 애플리케이션 개발에서도 사용 가능

 

*파싱

파싱(구문 분석 syntax analysis)은 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해(어휘 분석)하고, 토큰의 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리

parse tree/syntax tree를 생성하는 일련의 과정을 말한다.

[ 내용을 토큰으로 분해 -> 토큰의 문법적 의미와 구조를 반영하여 파스트리 생성 ]

 

*토큰 : 언어가 사용하는 기본 단어 ( 구문적 의미의 최소 단위) ex) string, void ...

 

 

*렌더링 : HTML,CSS,JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력

 

[브라우저의 렌더링 과정]

1. 브라우저는 HTML,CSS,JS,Image,Font 등 렌더링에 필요한 리소스를 요청하고 서버로 부터 응답받는다

 

2. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML 과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.

 

3. 브라우저의 JS 엔진은 서버로부터 응답된 JS를 parsing 하여 AST(Abstract Syntax Tree)를 생성하고 *바이트코드로

변환시켜 실행한다. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경가능하다. 변경된 DOM,CSSOM은 렌더 트리로 결합된다.

 

4.렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.

 

*바이트 코드 : 가상 머신에서 실행하도록 만든 바이너리 코드(이진 코드)

 

출처: https://velog.io/@vlrtpfdkxm/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

브라우저의 렌더링 과정 😬 ⭐️

 

요청과 응답

브라우저는 HTML,CSS,JS,Image,Font 등 렌더링에 필요한 리소스를 요청하고 서버로 부터 응답받는다

-> 즉, 렌더링에 필요한 리소스는 모두 서버에 존재 -> 필요한 리소스를 서버에 요청하고 서버가 응답한 리소스를 파상하여 렌더링 하는것

 

URL

출처:https://hanseul-lee.github.io/2020/12/24/20-12-24-URL/

URL의 구조

예를 들어, https://poiemaweb.com을 입력하고고 엔터 키를 누르면 루트 요청(/,Scheme Host로 구성된 URL 요청)이 

poiemaweb.com 서버로 전송, 일반적으로 서버는 루트 요청에 대해 암묵적으로 index.html을 응답함

따라서 서버는 루트 요청에 대해 서버에 루트 폴더에 존재하는 정적 파일 index.html을 클라이언트(브라우저)로 응답하고,

만약 다른 파일을 요청하려면 host 뒤에 path에 기술하여 서버에 요청한다.

 

index.html을 파싱하는 도중에 CSS,JS,img,font(외부 리소스)를 로드하는 태그(link,img,script..)를 만나면 HTML의 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청하기에 요청을 하지않았던 리소스들도 자동으로 응답된다.

 

*HTTP(HyperText Transfer Protocol)는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜(규약)이다.

 

HTML 파싱,DOM,CSSOM

 

 

출처: https://poiemaweb.com/js-dom 

DOM | PoiemaWeb

DOM은 HTML 문서를 파싱한 결과물이다

 

렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나간다

중간에 link,style 태그를 만나면 DOM 생성을 일시 중단하고 태그의 href 어트리뷰트에 지정된 css 파일을 서버에 요청한다

css파일이나 style 태그의 css를 HTML과 동일한 파싱과정을 거치며 해석하여 CSSOM을 생성(CSS Object Model)

이후 DOM 생성을 재개한다

 

렌더 트리 생성

DOM+CSSOM => Render Tree

렌더 트리는 렌더링을 위한 트리의 자료구조 / 브라우저 화면애 랜더링 되는 노드만으로 구성됨( meta X, script X)

 

 

출처 : https://velog.io/@leedocs/%EA%B0%9C%EB%B0%9C%EC%9D%BC%EA%B8%B0-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%A1%9C%EB%94%A9-%EA%B3%BC%EC%A0%95

브라우저의 렌더링 과정은 반복해서 실행될 수 있다

ex) 자바스크립트에 의한 노드 추가 및 삭제

Viewport 크기 변경 / HTML 요소의 레이아웃에 변경 발생 (width/margin...)

 

리렌더링은 성능에 악영향을 주는 작업이기에 빈번하게 발생해선 안됨

렌더링 엔진은 script 태그를 만나면 DOM 생성을 일시 중단하고 자바스크립트 엔진으로 제어권을 넘긴다

자바스크립트 엔진은 구글크롬 / Node.js의 V8...등 다양한 종류가 있고

제어권을 넘겨받은 엔진은 JS 코드를 파싱하기 시작한다 -> JS엔진은 AST(추상적 구문 트리)를 생성한다

(HTML->DOM같은 동작)

 

*토크나이징: 단순한 문자열인 자바스크립트 소스코드를 어휘 분석하여 토큰으로 분해한다

 

*파싱 : 토큰들의 집합을 구문 분석하여 AST를 생성한다.

 

*리플로우와 리페인트 -> JS로 DOM API를 사용해서 DOM,CSSOM을 변경한경우 브라우저 화면에 다시 렌더링하는 것

리플로우 -> 레이아웃 계산 / 리페인트 -> 재결합된 렌더 트리를 기반으로 다시 페인트