From 96aa95a4e6fecc1f7db51068433903920b9d764f Mon Sep 17 00:00:00 2001 From: publdaze Date: Thu, 11 Jan 2024 19:10:37 +0900 Subject: [PATCH] =?UTF-8?q?docs:=2038.4=20~=2038.6=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\352\271\200\354\235\200\354\247\200.md" | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git "a/docs/38_\353\270\214\353\235\274\354\232\260\354\240\200\354\235\230 \353\240\214\353\215\224\353\247\201 \352\263\274\354\240\225/\352\271\200\354\235\200\354\247\200.md" "b/docs/38_\353\270\214\353\235\274\354\232\260\354\240\200\354\235\230 \353\240\214\353\215\224\353\247\201 \352\263\274\354\240\225/\352\271\200\354\235\200\354\247\200.md" index ac6ebc86..89b93abe 100644 --- "a/docs/38_\353\270\214\353\235\274\354\232\260\354\240\200\354\235\230 \353\240\214\353\215\224\353\247\201 \352\263\274\354\240\225/\352\271\200\354\235\200\354\247\200.md" +++ "b/docs/38_\353\270\214\353\235\274\354\232\260\354\240\200\354\235\230 \353\240\214\353\215\224\353\247\201 \352\263\274\354\240\225/\352\271\200\354\235\200\354\247\200.md" @@ -27,3 +27,40 @@ ### 38.3 HTML 파싱과 DOM 생성 - 브라우저 렌더링 엔진은 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. + +### 38.4 CSS 파싱과 CSSOM 생성 + +- 렌더링 엔진이 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 가다가 + CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다. + -> CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 \*파싱 과정을 거치며 해서하여 CSSOM을 생성한다. + (\*바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM(CSS Object Model)) + -> CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다. +- CSSOM은 CSS의 상속을 반영하여 생성된다. + +### 38.5 렌더 트리 생성 + +- 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한다. + -> DOM과 CSSOM은 렌더링을 위해 **렌더 트리**로 결합된다. +- 렌더 트리 : 렌더링을 위한 트리 구조의 자료구조 + - 브라우저 화면에 렌더링되지 않는 노드(ex. meta, script 태그)와 CSS에 의해 비표시(ex. display: none)되는 노드들은 포함하지 않는다. + => 브라우저 화면에 렌더링되는 노드만으로 구성된다. + - 완성된 렌더 트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다. +- 레이아웃 계산과 페인팅이 재차 실행되는 경우 + - 자바스크립트에 의한 노드 추가 또는 삭제 + - 브라우저 창의 리사이징에 의한 뷰포트 크기 변경 + - HTML 요소의 레이아웃에 변경을 발생시키는 스타일 변경 + - ❗️ 리렌더링은 비용이 많이 드는(성능에 악영향을 주는)작업이다. => 가급적 리렌더링이 빈번하게 발생하지 않도록 주의해야 한다. + +### 38.6 자바스크립트 파싱과 실행 + +- 자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있다. +- CSS 파싱 과정과 마찬가지로 렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성하다가 + 자바스크립트 파일을 로드하는 script 태그나 자바스크립트 코드를 콘텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단한다. + -> 자바스크립트 파일이나 script 태그 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다. + -> 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 HTML 파싱을 시작하여 DOM 생성을 재개한다. +- 자바스크립트 엔진 + - 자바스크립트 파싱과 실행 처리 + - 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행하는 역할 + - 구글 크롬, Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등 다양한 종류가 있다. + - 모든 자바스크립트 엔진은 ECMAScript 사양을 준수한다. +- HTML -> DOM, CSS -> CSSOM, **JavaScript -> AST(추상적 구문트리)**