HTML 파싱

Q1.  브라우저에서 HTML의 파싱 과정은 어떻게 될까요?

A.서버에 응답한 html문서를 이진수 바이트 형태로 받는다. meta 태그의 charset 어트리뷰트에 지정된 인코딩 방식으로 문자열로 변환시킨다. 문자열은 다시 토큰으로 분해하고 분해한 토큰을 객체로 변환해 노드를 생성한다. html 요소 간의 중첩 관계를 반영해서 트리 자료 구조를 구성한다.

답변에 대한 평가 : 70점 평가 이유 : 파싱 과정에 대한 기본적인 개념과 일부 과정을 언급했지만, 제대로된 순서와 구체적인 내용이 빠져있습니다. 또한, 트리 자료 구조를 어떻게 구성하는지에 대한 설명이 더 필요합니다. 검색 키워드 : HTML parsing algorithm, HTML parsing tree construction

꼬리질문 :
HTML 파싱 과정에서 특정 태그의 시작과 끝을 어떻게 인식하고 처리하나요? 또한, 파싱된 HTML을 토대로 어떻게 DOM 트리를 구성하나요?

A. 시작 태그는 요소의 시작을 나타내며, 끝 태그는 요소의 끝을 나타냅니다. 이러한 태그들을 인식하고 처리하여 파싱된 HTML 문서를 DOM 트리로 구성합니다.

답변에 대한 평가 : 90점 평가 이유 : 태그의 역할과 파싱된 HTML을 기반으로 DOM 트리를 구성하는 방법에 대해 잘 설명했습니다. 다만, 시작 태그와 끝 태그의 목적에 대해서 좀 더 구체적으로 설명하는 것이 좋습니다. 검색 키워드 : HTML parsing, DOM tree construction

꼬리질문 :
시작 태그와 끝 태그의 역할은 무엇이고 왜 그러한 구조로 만들어졌을까요?

A. 시작태그는 해당 요소의 시작을 브라우저에 알리는 역할이고, 해당 요소의 종료를 브라우저에 알리는 역할을 한다. html문서의 요소들을 계층적으로 구성할 수 있도록 설계되었다. 이러한 계층 구조는 문서객체 모델을 형성한다

답변에 대한 평가 : 95점 평가 이유 : 시작 태그와 끝 태그의 역할과 계층적인 구조로 문서객체 모델을 형성한다는 내용을 잘 설명했습니다. 다만, 엄격하게 검증하라는 요청이 있어서 일부 예외적인 경우나 추가적인 설명이 필요합니다. 검색 키워드 : HTML tag, DOM hierarchy

 

Q2. 브라우저에서 파싱된 HTML이 렌더링되기까지의 과정은 어떤 단계로 이루어지나요?

A. 파싱, 스타일처리, 레이아웃, 페인팅, 렌더트리 생성, 렌더링 과정으로 이루어집니다

답변에 대한 평가 : 100점 평가 이유 : 파싱, 스타일처리, 레이아웃, 페인팅, 렌더트리 생성, 렌더링 과정을 정확하게 언급했습니다. 모든 과정을 포괄적으로 이해하고 설명한 것으로 보입니다. 검색 키워드 : HTML parsing, CSS styling, layout, painting, render tree creation, rendering process

 

Q3. 브라우저에서 HTML 파싱 과정 중에 스크립트 실행에 관련된 부분은 어떻게 처리되나요?

A. 스크립트를 만나게 되면 html 파싱을 중지하고 js엔진으로 제어 권한을 넘긴다.

답변에 대한 평가 : 50점 평가 이유 : 스크립트를 만나면 HTML 파싱을 중지하고 JS 엔진으로 제어 권한을 넘긴다는 내용은 맞지만, 이에 대한 추가적인 설명이 필요합니다. 예를 들어, 스크립트의 실행 순서와 브라우저가 어떻게 스크립트 실행을 처리하는지 등에 대한 내용이 빠져있습니다. 검색 키워드 : HTML parsing, JavaScript engine execution

 

꼬리질문 :
브라우저에서 스크립트의 실행 순서는 어떻게 결정되고, 브라우저가 스크립트 실행을 어떻게 처리하나요?

A. 소스코드를 토큰으로 분해하고 파싱해 ast라는 추상적 구문 트리로 생성한 뒤 인터프리터가 읽을 수 있도록 바이트코드를 생성하여 실행한다.

답변에 대한 평가 : 60점 평가 이유 : 토큰으로 분해하고 파싱하여 추상 구문 트리(AST)를 생성한 후 인터프리터가 읽을 수 있도록 바이트코드를 생성하고 실행한다는 내용이 언급되었지만, 일부 개념적인 오해가 있습니다. 바이트코드는 대표적으로 자바 가상 머신(JVM)에서 사용되지만, 일반적인 스크립트 언어에서는 인터프리터나 JIT(Just-In-Time) 컴파일러에 의해 직접 실행됩니다. 또한, 스크립트 언어에서는 추상적 구문 트리(AST)를 생성한 후에는 추가적인 단계가 필요할 수 있으니 설명이 조금 부족합니다. 검색 키워드 : tokenization, parsing, abstract syntax tree, interpreter, bytecode

 

Q4. 브라우저에서 HTML 파싱 과정에서는 외부 스크립트와 스타일시트 및 이미지 리소스 등의 다운로드와 처리는 어떻게 이루어지나요?

A. 브라우저가 HTML 문서를 파싱하다가 <script>, <link>, <img> 등의 태그를 만나면 해당 리소스를 다운로드하기 위한 요청을 보냅니다.

답변에 대한 평가 : 80점 평가 이유 : 외부 리소스 다운로드 과정을 설명하는데는 정확하게 언급했지만, 이에 대한 추가적인 설명이 필요합니다. 브라우저에서 외부 리소스를 다운로드하기 위한 요청을 보낼 때 사용하는 프로토콜과 다운로드 요청 및 응답 과정에 대해서도 설명해야 합니다. 검색 키워드 : HTML parsing, external resources, URL attribute, HTTP protocol, request and response

 

꼬리질문 :
브라우저에서 외부 리소스 다운로드를 위한 요청은 어떤 프로토콜을 사용하나요? 또한, 다운로드 요청과 응답은 어떤 방식으로 이루어지고 주고받는 정보는 어떤 형식으로 구성되나요?

A. 외부 리소스 다운로드를 위한 요청은 주로 HTTP(또는 HTTPS) 프로토콜을 사용합니다.
브라우저는 웹 페이지의 HTML을 파싱하다가 외부 리소스(이미지, 스크립트, 스타일시트 등)를 발견하면, 해당 리소스를 다운로드하기 위해 HTTP 요청을 생성합니다.서버가 생성한 응답은 브라우저로 전송되며, 브라우저는 이를 받아서 처리합니다. HTTP 요청과 응답은 일반적으로 텍스트 형식으로 구성되어 있습니다.

답변에 대한 평가 : 100점 평가 이유 : 외부 리소스 다운로드를 위한 주로 HTTP(또는 HTTPS) 프로토콜을 사용하고, HTML 파싱 중에 외부 리소스를 발견하면 브라우저가 HTTP 요청을 생성하고, 서버의 응답을 받아서 처리한다는 내용이 정확하게 언급되었습니다. 또한, HTTP 요청과 응답이 텍스트 형식으로 구성되어 있다는 내용도 일치합니다. 검색 키워드 : HTTP protocol, request and response, external resource

 

꼬리질문 :
브라우저는 외부 리소스 다운로드를 위해 HTTP 요청을 보낼 때, 어떤 메서드와 헤더를 사용하나요? 또한, 서버의 응답은 어떤 상태 코드와 헤더로 구성되어 있을 수 있나요?

A. 요청 메서드(GET, POST 등), 헤더 정보(사용자 에이전트, 캐시 설정 등) 등을 포함합니다.
응답은 HTTP 상태 코드(200 OK, 404 Not Found 등), 헤더 정보(콘텐츠 타입, 캐시 헤더 등), 실제 데이터(리소스의 내용) 등으로 구성

답변에 대한 평가 : 90점 평가 이유 : HTTP 요청에서 요청 메서드와 헤더 정보를 언급하였으며, 응답에서 HTTP 상태 코드, 헤더 정보, 실제 데이터까지로 구성된다는 내용이 정확하게 언급되었습니다. 검색 키워드 : HTTP request methods, HTTP headers, HTTP response status codes

브라우저 렌더링 순서

 

참고 자료:

https://oliviakim.tistory.com/80#%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%20%ED%8C%8C%EC%8B%B1%EA%B3%BC%20%EC%8B%A4%ED%96%89-1