728x90
반응형
- 파싱 : Parsing
- 파싱(구문 분석 : Syntax Analysis)는 작성된 텍스트 문서를 읽어 들여 실행하기 위해, 문자열을 토큰(Token)으로 분해(어휘 분석 : Lexical Analysis)하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리(Parse Tree / Syntax Tree)를 생성하는 일련의 과정이다.
- 일반적으로 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어(Intermediate code)인 바이트코드(Bytecode)를 생성하고 실행한다.
- 렌더링 : Rendering
- 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다.
브라우저의 렌더링 과정
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 생성한다.
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST (Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행한다. 이때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있다. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합된다.
- 렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅한다.
쉽게 말해서,
- 브라우저는 서버에게 리소스(HTML, CSS 등등)를 요청하고 받음
- 브라우저의 렌더링 엔진은 받은 HTML, CSS를 쪼개서(파싱) DOM랑 CSSOM을 만들고, 이걸로 렌더 트리를 만듦
- 브라우저의 자바스크립트 엔진은 받은 자바스크립트를 쪼개서 AST를 만들고, 이걸 바이트코드로 변환해서 실행
- 이때, 자바스크립트는 DOM API를 통해서 DOM이나 CSSOM를 건드릴 수 있고(변경가능), 변경되면 DOM과 CSSOM은 다시 렌더 트리로 결합됨
- 렌더 트리를 베이스로 해서 브라우저에 보여줌
별로 안쉬운 거 같으니 다시
- 브라우저한테는 엔진이 두 개 렌더링 엔진, 자바스크립트 엔진
- 브라우저는 서버한테 이것저것 리소스를 달라고 해서 받음
- 렌더링 엔진은 HTML, CSS로 DOM, CSSOM을 만들고 이걸로 렌더 트리를 생성해서 보여주는 역할
- 자바스크립트 엔진은 자바스크립트로 AST를 만들고, 실행하는 역할
- 이때, 자바스크립트는 DOM이랑 CSSOM을 변경할 수 있고 그럼 렌더 트리에 반영됨
- 즉, 렌더링 엔진은 리소스를 화면에 보여주는 역할을 하고, 자바스크립트 엔진은 실제로 코드를 실행하는 역할을 함
728x90
반응형