{"type": "doc", "content": [{"type": "heading", "attrs": {"level": 3}, "content": [{"text": "브라우저 렌더링 과정", "type": "text"}]}, {"type": "orderedList", "attrs": {"start": 1, "tight": true}, "content": [{"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 ", "type": "text"}, {"text": "리소스를 요청", "type": "text", "marks": [{"type": "bold"}]}, {"text": "하고 ", "type": "text"}, {"text": "서버로부터 응답을 받는다.", "type": "text", "marks": [{"type": "bold"}]}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "브라우저의 렌더링 엔진", "type": "text", "marks": [{"type": "bold"}]}, {"text": "은 서버로부터 응답된 ", "type": "text"}, {"text": "HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성", "type": "text", "marks": [{"type": "bold"}]}, {"text": "하고 이들을 결합하여 ", "type": "text"}, {"text": "렌더 트리를 생성", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "브라우저의 자바스크립트 엔진", "type": "text", "marks": [{"type": "bold"}]}, {"text": "은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고 ", "type": "text"}, {"text": "바이트 코드로 변환하여 실행", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다. 이때 자바스크립트는 ", "type": "text"}, {"text": "DOM API를 통해 DOM이나 CSSOM을 변경", "type": "text", "marks": [{"type": "bold"}]}, {"text": "할 수 있다. ", "type": "text"}, {"text": "변경된 DOM과 CSSOM은 다시 렌더 트리로 결합", "type": "text", "marks": [{"type": "bold"}]}, {"text": "된다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "렌더 트리를 기반으로 HTML 요소의 레이아웃을 계산하고 ", "type": "text"}, {"text": "브라우저 화면에 HTML 요소를 페인팅", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다.", "type": "text"}]}]}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "요청과 응답", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "서버에 요청을 전송하기 위해 브라우저는 ", "type": "text"}, {"text": "주소창을 제공", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "주소창에 URL을 입력하면 URL의 호스트 이름이 DNS를 통해 IP주소로 변환되고 이 IP주소를 갖는 서버에게 요청을 전송한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "일반적으로 서버는 루트 요청에 대해 암묵적으로 index.html을 응답하도록 기본 설정되어있다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "paragraph", "content": [{"text": "index.html뿐만 아니라 CSS, 자바스크립트, 이미지, 폰트 파일들도 응답한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "이는 브라우저의 렌더링 엔진이 HTML(index.html)을 파싱하는 도중 외부 리소스를 로드하는 태그(link, img, script 태그) 등을 만나면 HTML의 파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청하기 때문이다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "HTTP 1.0과 HTTP 2.0", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "HTTP는 웹에서 브라우저와 서버가 통신하기 위한 프로토콜", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "1996년 HTTP/1.0", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "1999년 HTTP/1.1", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "2015년 HTTP/2.0", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "HTTP/1.1은 기본적으로 커넥션 당 하나의 요청과 응답 처리", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "HTTP/2.0는 커넥션당 여러개의 요청과 응답 처리 → 다중 요청/응답 가능", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "HTTP/2.0은 HTTP/1.1에 비해 페이지 로드 속도가 약 50% 빠르다고 알려져 있다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "HTML 파싱과 DOM 생성", "type": "text"}]}, {"type": "orderedList", "attrs": {"start": 1, "tight": true}, "content": [{"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "서버에 존재하던 ", "type": "text"}, {"text": "HTML 파일", "type": "text", "marks": [{"type": "bold"}]}, {"text": "이 브라우저의 요청에 의해 응답된다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "서버는 메모리에 저장된 ", "type": "text"}, {"text": "바이트", "type": "text", "marks": [{"type": "bold"}]}, {"text": "를 인터넷을 경유하여 응답한다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "브라우저는 응답된 바이트 형태의 HTML문서를 meta 태그의 charset 어트리뷰트에 의해 지정된 인코딩 방식(예: UTF-8)을 기준으로 ", "type": "text"}, {"text": "문자열로 변환", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "문자열로 변환된 HTML 문서를 읽어 들여 문법적 의미를 갖는 코드의 최소 단위인 ", "type": "text"}, {"text": "토큰", "type": "text", "marks": [{"type": "bold"}]}, {"text": "들로 분해한다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "각 토큰들을 객체로 변환하여 ", "type": "text"}, {"text": "노드", "type": "text", "marks": [{"type": "bold"}]}, {"text": "들을 생성한다.", "type": "text"}]}]}, {"type": "listItem", "content": [{"type": "paragraph", "content": [{"text": "HTML의 요소 간의 부자 관계를 반영하여 모든 노드들을 ", "type": "text"}, {"text": "트리 자료구조", "type": "text", "marks": [{"type": "bold"}]}, {"text": "로 구성한다. 이 자료구조를 ", "type": "text"}, {"text": "DOM", "type": "text", "marks": [{"type": "bold"}]}, {"text": "이라고 부른다.", "type": "text"}]}]}]}, {"type": "paragraph", "content": [{"text": "DOM은 HTML 문서를 파싱한 결과물!", "type": "text", "marks": [{"type": "bold"}, {"type": "textStyle", "attrs": {"color": "#E00000"}}]}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "CSS 파싱과 CSSOM 생성", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나간다. 이처럼 렌더링 엔진은 DOM을 생성해 나가다가 ", "type": "text"}, {"text": "CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "그리고 link 태그의 href 어트리뷰트에 지정된 CSS 파일을 서버에 요청하여 로드한 CSS파일이나 style 태그 내의 CSS를 HTML과 동일한 파싱과정(바이트 → 문자 → 토큰 → 노드 → CSSOM)을 거치며 해석하여 ", "type": "text"}, {"text": "CSSOM(CSS Object Model)을 생성", "type": "text", "marks": [{"type": "bold"}]}, {"text": "한다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "렌더 트리 생성", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "렌더링을 위해 DOM과 CSSOM은 ", "type": "text"}, {"text": "렌더 트리", "type": "text", "marks": [{"type": "bold"}]}, {"text": "로 결합된다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "렌더 트리", "type": "text", "marks": [{"type": "bold"}]}, {"text": "는 ", "type": "text"}, {"text": "렌더링을 위한", "type": "text", "marks": [{"type": "bold"}]}, {"text": " 트리 구조의 자료구조이다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "브라우저 화면에 렌더링되지 않는 노드(예: meta tag, script tag)와 CSS에 의해 비표시 되는 노드(예: display:none)들은 포함되지 않는다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "렌더 트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "레이아웃 계산과 페인팅을 다시 실행하는 리렌더링은 성능에 악영향을 주는 작업이다. 가급적 리렌더링이 빈번하게 발생하지 않도록 주의할 필요가 있다.", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "자바스크립트 파싱과 실행", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "CSS 파싱 과정과 마찬가지로 렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다가 자바스크립트 파일을 로드하는 script 태그나 자바스크립트 코드를 콘텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단한다. 자바스크립트 코드를 파싱하기 위해 ", "type": "text"}, {"text": "자바스크립트 엔진에 제어권을 넘긴다.", "type": "text", "marks": [{"type": "bold"}]}]}, {"type": "paragraph", "content": [{"text": "자바스크립트 파싱과 실행은 ", "type": "text"}, {"text": "브라우저의 렌더링 엔진", "type": "text", "marks": [{"type": "bold"}]}, {"text": "이 아닌 ", "type": "text"}, {"text": "자바스크립트 엔진", "type": "text", "marks": [{"type": "bold"}]}, {"text": "이 처리한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "(자바스크립트 소스코드 → 토큰 → AST → 바이트 코드 → 인터프리터에 의해 실행)", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "리플로우와 리페인트", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "자바스크립트 코드에 DOM이나 CSSOM을 변경하는 DOM API가 사용된 경우 DOM이나 CSSOM이 변경된다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "이 때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "리플로우", "type": "text", "marks": [{"type": "bold"}]}, {"text": " : 레이아웃 계산을 다시 하는 것", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "리페인트", "type": "text", "marks": [{"type": "bold"}]}, {"text": " : 재결합된 렌더 트리를 기반으로 다시 페인트하는 것", "type": "text"}]}, {"type": "paragraph"}, {"type": "heading", "attrs": {"level": 3}, "content": [{"text": "자바스크립트 파싱에 의한 HTML 파싱 중단", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "브라우저는 동기적으로, 즉 위에서 아래 방향으로 순차적으로 HTML, CSS, 자바스크립트를 파싱하고 실행한다.", "type": "text"}]}, {"type": "paragraph", "content": [{"text": "따라서 script 태그의 위치는 중요한 의미를 갖는다.", "type": "text"}]}, {"type": "codeBlock", "attrs": {"language": "html"}, "content": [{"text": "\n\n\t\n\t\t\n\t\t

자바스크립트 -0??